/*
 * MasterKeys Manager - customer order view.
 *
 * The block rules below are intentionally NOT scoped to .woocommerce-account:
 * the very same markup is rendered on the checkout thank-you page, which does
 * not carry that body class. Only the account two-column layout fixes stay
 * scoped, because they exist to defeat BeTheme's float layout.
 */

/* ---------- account layout guards (account only) ---------- */
.woocommerce-account .mk-account-wrap.mk-manager-account-active,
.woocommerce-account.mk-manager-account-ui .mk-account-wrap{width:100%!important;max-width:none!important}
.woocommerce-account .mk-manager-account-active .woocommerce-MyAccount-content,
.woocommerce-account.mk-manager-account-ui .woocommerce-MyAccount-content{min-width:0!important;max-width:none!important;float:none!important}
.woocommerce-account .mk-order-view-enhanced .woocommerce-order-details{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;float:none!important;background:transparent!important}
@media(min-width:783px){
	.woocommerce-account .mk-account-wrap.mk-manager-account-active,
	.woocommerce-account.mk-manager-account-ui .mk-account-wrap{display:flex!important;align-items:flex-start!important;gap:28px!important}
	.woocommerce-account .mk-manager-account-active .woocommerce-MyAccount-content,
	.woocommerce-account.mk-manager-account-ui .woocommerce-MyAccount-content{flex:1 1 0!important;width:0!important}
}

/* ---------- hide the native Woo blocks we replace ---------- */
/* Applied by account-order-view.js only once our own blocks are present, so a
   PHP-side failure can never leave the customer with an empty order page. */
.mk-order-view-enhanced .woocommerce-order-details>h2,
.mk-order-view-enhanced .woocommerce-order-details>table,
.mk-order-view-enhanced .woocommerce-customer-details{display:none!important}
.mk-order-view-enhanced .woocommerce-order-details{background:transparent!important}

/* ---------- shared card chrome ----------
   The licence card (.mk-ent-container/.mk-ent-card, rendered by the licence
   module) is deliberately included here so all four blocks share exactly the
   same width, margin and border geometry. Previously they were styled in two
   different files and drifted apart. */
.mk-order-details-box,
.mk-order-documents,
.mk-billing-address-box,
.woocommerce .mk-ent-container,
.mk-ent-container{display:block;width:100%;max-width:none;margin:0 0 22px;padding:0;box-sizing:border-box;float:none;text-align:left;font-family:inherit}
/* overflow:hidden clips the inner grey panels to the rounded corners, so no
   shaded background can sit on top of the card border. */
.mk-order-details-box,
.mk-order-documents,
.mk-billing-address-box,
.mk-ent-container>.mk-ent-card{overflow:hidden;border:1px solid #e4e9f1;border-radius:20px;background:#fff;box-shadow:0 18px 45px -34px rgba(8,28,63,.32)}
.mk-ent-container>.mk-ent-card{margin:0;width:100%;box-sizing:border-box}

.mk-order-section-head{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid #edf0f5;background:#fff;text-align:left}
.mk-order-section-head>div{min-width:0;flex:1 1 auto;text-align:left}
.mk-order-section-head h2{margin:0 0 3px;color:#081c3f;font-family:inherit;font-size:21px;font-weight:750;line-height:1.25;text-align:left;text-transform:none}
.mk-order-section-head p{margin:0;color:#7b8494;font-size:13px;line-height:1.45;text-align:left}

/* ---------- products ---------- */
.mk-order-products-list{padding:0 24px}
.mk-order-product-item{display:grid;grid-template-columns:82px minmax(0,1fr) auto;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid #edf0f5}
.mk-order-product-item:last-child{border-bottom:0}
.mk-order-product-image{width:82px;height:82px;overflow:hidden;border-radius:14px;background:#f1f2f4}
.mk-order-product-image img{display:block;width:100%;height:100%;margin:0;object-fit:contain}
.mk-order-product-name,.mk-order-product-name a{color:#081c3f;font-size:15px;font-weight:750;line-height:1.4;letter-spacing:.01em;text-decoration:none}
.mk-order-product-meta{margin-top:5px;color:#7b8494;font-size:13px}
.mk-order-product-price{color:#081c3f;font-size:14px;font-weight:750;text-align:right}
.mk-order-product-item--child .mk-order-product-name,
.mk-order-product-item--child .mk-order-product-name a{font-size:14px;font-weight:650;color:#3c4a63}
.mk-order-bundle-included{color:#657086;font-size:12px;font-weight:600}

/* ---------- totals ---------- */
.mk-order-financial-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:20px 24px 12px}
.mk-order-financial-card{padding:15px 16px;border:1px solid #e1e7ef;border-radius:14px;background:#fff}
.mk-order-financial-card--total{border-color:#c7d3e3;background:#eef3f9}
.mk-order-financial-label{display:block;margin-bottom:5px;color:#7b8494;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.mk-order-financial-value{color:#081c3f;font-size:18px;line-height:1.2}
.mk-order-summary-grid{margin:0 24px 26px;padding:4px 18px;border-radius:14px;background:#f7f9fc;border:0}
.mk-order-summary-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-top:0;border-bottom:1px solid #e5eaf1;color:#657086;font-size:13px}
/* No rule above the first row - only the separators between rows. */
.mk-order-summary-row:first-child{border-top:0}
.mk-order-summary-row:last-child{border-bottom:0}
.mk-order-summary-row strong{color:#081c3f;text-align:right}

/* ---------- account actions ---------- */
.mk-order-actions{padding:0 24px 20px}
.mk-order-actions-label{display:block;margin-bottom:8px;color:#657086;font-size:12px;font-weight:700}
.mk-order-actions-buttons{display:flex;flex-wrap:wrap;gap:9px}
.mk-order-action-btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;padding:10px 17px!important;border:1px solid #d5deea!important;border-radius:11px!important;background:#fff!important;color:#081c3f!important;box-shadow:none!important;font-size:13px!important;font-weight:700!important;text-decoration:none!important}

/* ---------- documents ---------- */
.mk-order-documents-body{padding:20px 24px}
.mk-order-documents-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.mk-order-documents-actions:empty{display:none}
.mk-order-action-slot{display:contents}
.mk-order-action-slot .order-again{margin:0}
.mk-order-doc-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 17px!important;border:1px solid #d5deea!important;border-radius:11px!important;background:#fff!important;color:#081c3f!important;box-shadow:none!important;font-family:inherit!important;font-size:13px!important;font-weight:700!important;line-height:1.2!important;text-decoration:none!important}
.mk-order-doc-btn--primary{border-color:#0c2149!important;background:#0c2149!important;color:#fff!important}
.mk-order-doc-btn--proform,.mk-order-doc-btn--deposit{border-color:#0c2149!important;background:#0c2149!important;color:#fff!important}
.mk-order-doc-btn--reorder{border-color:#65b87f!important;background:#65b87f!important;color:#fff!important}
.mk-order-documents-empty,.mk-order-documents-status{margin:13px 0 0;color:#7b8494;font-size:13px}
.mk-order-documents-hint{margin:14px 0 0;padding:12px 14px;border:1px solid #e1e7ef;border-radius:12px;background:#f7f9fc;color:#4c5972;font-size:13px;line-height:1.5}
.mk-order-documents-hint a{color:#0c2149;font-weight:700}

/* ---------- billing ---------- */
.mk-billing-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:18px 24px 24px}
.mk-billing-row{min-width:0;padding:14px 16px;border:1px solid #e4e9f1;border-radius:13px;background:#fff}
.mk-billing-row dt{margin:0 0 5px;color:#7b8494;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.mk-billing-row dd,.mk-billing-row a{margin:0;overflow-wrap:anywhere;color:#081c3f;font-size:14px;font-weight:650;text-decoration:none}

/* ---------- geometry lock ----------
   BeTheme sizes elements inside .woocommerce-order-details on its own, which
   made the document card render wider than the cards above and below it. These
   four blocks must always share the exact same box, so the values are pinned
   rather than merely declared. */
html body .mk-order-details-box[data-mk-order-view="summary"],
html body .mk-order-documents[data-mk-order-view="documents"],
html body .mk-billing-address-box[data-mk-order-view="billing"],
html body .mk-ent-container.mk-ent-license-container{
	width:100%!important;
	max-width:none!important;
	min-width:0!important;
	margin:0 0 22px!important;
	padding:0!important;
	float:none!important;
	box-sizing:border-box!important;
}
/* overflow:hidden clips the inner grey panels to the rounded corner, so no
   shaded background can sit on top of the card border. */
html body .mk-order-details-box[data-mk-order-view="summary"],
html body .mk-order-documents[data-mk-order-view="documents"],
html body .mk-billing-address-box[data-mk-order-view="billing"]{
	border-radius:20px!important;
	overflow:hidden!important;
}
/* The licence wrapper is not the visual card - its child is. */
html body .mk-ent-container.mk-ent-license-container>.mk-ent-card{border-radius:20px!important;overflow:hidden!important}

/* ---------- responsive ---------- */
@media(max-width:980px){.mk-order-financial-highlights,.mk-billing-list{grid-template-columns:1fr}}
@media(max-width:680px){
	.mk-order-section-head{align-items:flex-start;flex-wrap:wrap;padding:17px 18px}
	.mk-order-products-list{padding:0 18px}
	.mk-order-product-item{grid-template-columns:62px minmax(0,1fr);gap:14px}
	.mk-order-product-image{width:62px;height:62px;border-radius:12px}
	.mk-order-product-price{grid-column:2;text-align:left}
	.mk-order-financial-highlights{padding:18px 18px 10px}
	.mk-order-summary-grid{margin:0 18px 18px}
	.mk-order-actions{padding:0 18px 18px}
	.mk-order-documents-body,.mk-billing-list{padding:16px 18px 20px}
	.mk-order-documents-actions,.mk-order-doc-btn,.mk-order-action-btn{width:100%}
}

/* ---------- inner spacing lock ----------
   BeTheme's WooCommerce styles reach into these containers, which flattened the
   inner padding and let the grey totals panel run into the card border. Same
   values as declared above, only pinned. Kept last in the file, with its own
   mobile block, so the responsive values still win. */
html body .mk-order-details-box .mk-order-section-head,
html body .mk-order-documents .mk-order-section-head,
html body .mk-billing-address-box .mk-order-section-head{padding:20px 24px!important}
html body .mk-order-details-box .mk-order-products-list{padding:0 24px!important}
html body .mk-order-details-box .mk-order-financial-highlights{padding:20px 24px 14px!important}
html body .mk-order-details-box .mk-order-summary-grid{
	margin:0 24px 26px!important;
	padding:6px 18px!important;
	border-radius:14px!important;
	overflow:hidden!important;
}
html body .mk-order-details-box .mk-order-actions{padding:0 24px 24px!important}
html body .mk-order-documents .mk-order-documents-body{padding:20px 24px 24px!important}
html body .mk-billing-address-box .mk-billing-list{padding:18px 24px 26px!important}

@media(max-width:680px){
	html body .mk-order-details-box .mk-order-section-head,
	html body .mk-order-documents .mk-order-section-head,
	html body .mk-billing-address-box .mk-order-section-head{padding:17px 18px!important}
	html body .mk-order-details-box .mk-order-products-list{padding:0 18px!important}
	html body .mk-order-details-box .mk-order-financial-highlights{padding:18px 18px 12px!important}
	html body .mk-order-details-box .mk-order-summary-grid{margin:0 18px 20px!important;padding:4px 14px!important}
	html body .mk-order-details-box .mk-order-actions{padding:0 18px 20px!important}
	html body .mk-order-documents .mk-order-documents-body{padding:16px 18px 20px!important}
	html body .mk-billing-address-box .mk-billing-list{padding:16px 18px 20px!important}
}

/* ---------- thank-you page: one consistent column ----------
   The WooCommerce overview strip and the theme's bank-transfer card are
   siblings of our cards inside .woocommerce-order, but site CSS gives them a
   narrower width of their own, so the page read as two different layouts.
   The mk-order-thankyou body class is set by the order-view module. */
body.mk-order-thankyou .woocommerce-order>.woocommerce-notice,
body.mk-order-thankyou .woocommerce-order-overview,
body.mk-order-thankyou .mk-bacs-payment-box{
	width:100%!important;
	max-width:none!important;
	margin-left:0!important;
	margin-right:0!important;
	box-sizing:border-box!important;
}
body.mk-order-thankyou .mk-bacs-payment-box{
	border-radius:20px!important;
	overflow:hidden!important;
	margin-bottom:22px!important;
}