/**
 * Flora Rewards — My Account & Checkout skin
 *
 * Ports the Healing Flora "My Account Tabs" prototype onto the real
 * WooCommerce My Account and Checkout markup. Loaded on account + checkout
 * pages only (see Flora_Account_UI::enqueue). No colours or fonts are
 * hard-coded to a staging site — everything is a token below.
 *
 * @package FloraRewards
 */

.woocommerce-account,
.woocommerce-checkout,
.flora-portal {
	--ink:#2C3639;
	--lun:#3F4E4F;
	--lt:#F7F7F7;
	--icy:#E8F6F3;
	--im:#BFD8D2;
	--acc:#A27B5B;
	--ah:#8E6A4D;
	--paper:#ffffff;
	--ink-soft:#3F4E4F;
	--cream-2:#F7F7F7;
	--line:#D6D6D6;
	--line-soft:rgba(214,214,214,.52);
	--shadow-sm:0 4px 14px -8px rgba(44,54,57,.18);
	--radius:12px;
	--radius-sm:7px;
}

/* ===================================================================
   ACCOUNT SHELL
=================================================================== */
.woocommerce-account .woocommerce {
	max-width:1240px;
	margin:0 auto;
	color:var(--ink);
}

/* Intro band above the tabs (injected by Flora_Account_UI) */
.flora-acct-band{padding:14px 0 22px;}
.flora-acct-band .eyebrow{
	font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
	font-weight:700;color:var(--acc);
}
.flora-acct-band h1{
	font-family:'Cinzel',Georgia,serif;font-size:2rem;margin:.25em 0 .2em;
	color:var(--ink);font-weight:600;
}
.flora-acct-band p{font-size:1rem;color:var(--ink-soft);max-width:760px;margin:0;line-height:1.55;}

/* ===================================================================
   NAVIGATION → horizontal tab bar
=================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation{
	float:none;width:100%;margin:0 0 26px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
	list-style:none;margin:0;padding:0;
	display:flex;gap:4px;flex-wrap:wrap;
	border-bottom:1.5px solid var(--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li{margin:0;}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
	display:inline-block;text-decoration:none;
	font-size:.84rem;font-weight:700;color:var(--ink-soft);
	padding:11px 16px;border:1.5px solid transparent;
	border-radius:10px 10px 0 0;position:relative;top:1.5px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{color:var(--ink);}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{
	color:var(--ink);background:var(--paper);
	border-color:var(--line);border-bottom-color:var(--paper);
}
/* Push the Flora Rewards + Logout links to the right edge */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--flora-rewards{margin-left:auto;}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--ah);}

@media (max-width:720px){
	.woocommerce-account .woocommerce-MyAccount-navigation ul{
		flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul li a{white-space:nowrap;}
	.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--flora-rewards{margin-left:0;}
}

/* ===================================================================
   CONTENT PANEL
=================================================================== */
.woocommerce-account .woocommerce-MyAccount-content{
	float:none;width:100%;margin:0;padding:0;
}
/* Generic card wrapper for endpoint content */
.woocommerce-account .woocommerce-MyAccount-content > p,
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-downloads{
	background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
	padding:24px 26px;box-shadow:var(--shadow-sm);
}
.woocommerce-account .woocommerce-MyAccount-content > p{margin:0 0 16px;color:var(--ink-soft);line-height:1.55;}

/* ===================================================================
   PROTOTYPE COMPONENTS (injected markup: dashboard, payment cards)
=================================================================== */
.flora-acct-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start;}
.flora-acct-layout.single{grid-template-columns:1fr;}
@media (max-width:920px){.flora-acct-layout{grid-template-columns:1fr;}}
.flora-acct-main,.flora-acct-side{display:flex;flex-direction:column;gap:20px;min-width:0;}

.flora-acct-hero{
	background:var(--ink);color:var(--icy);border-radius:var(--radius);
	padding:34px;display:flex;align-items:center;justify-content:space-between;
	gap:26px;flex-wrap:wrap;position:relative;overflow:hidden;
}
.flora-acct-hero::before{
	content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;
	background:radial-gradient(circle,rgba(162,123,91,.28),transparent 68%);pointer-events:none;
}
.flora-acct-hero-left,.flora-acct-hero-right{position:relative;z-index:1;}
.flora-acct-hero-left{display:flex;flex-direction:column;gap:7px;}
.flora-acct-hero-greet{font-size:.84rem;color:rgba(255,255,255,.64);}
.flora-acct-hero-name{font-family:'Cinzel',Georgia,serif;font-size:1.55rem;font-weight:600;color:#fff;line-height:1.2;}
.flora-acct-tier-pill{
	display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;
	background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
	padding:5px 13px;border-radius:999px;width:fit-content;margin-top:2px;
}
.flora-acct-hero-right{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.flora-acct-points-block{text-align:right;}
.flora-acct-points-num{font-family:'Cinzel',Georgia,serif;font-size:2.5rem;font-weight:600;color:var(--acc);line-height:1;}
.flora-acct-points-lbl{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.64);margin-top:5px;}
.flora-acct-points-val{font-size:.78rem;color:rgba(255,255,255,.64);margin-top:6px;}
@media (max-width:560px){
	.flora-acct-hero{padding:26px 22px;}
	.flora-acct-hero-right{width:100%;justify-content:space-between;}
	.flora-acct-points-block{text-align:left;}
}

.flora-acct-card{
	background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
	padding:24px 26px;box-shadow:var(--shadow-sm);min-width:0;
}
.flora-acct-card h3{font-family:'Cinzel',Georgia,serif;font-size:1.12rem;margin:0 0 4px;font-weight:600;color:var(--ink);}
.flora-acct-card .flora-acct-sub{color:var(--ink-soft);font-size:.84rem;margin:0 0 16px;line-height:1.5;}

.flora-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
@media (max-width:740px){.flora-quick-grid{grid-template-columns:1fr;}}
.flora-quick-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 16px;box-shadow:var(--shadow-sm);}
.flora-quick-card .q-top{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--acc);margin-bottom:8px;}
.flora-quick-card .q-num{font-family:'Cinzel',Georgia,serif;font-size:1.7rem;font-weight:600;color:var(--ink);line-height:1;}
.flora-quick-card .q-text{font-size:.82rem;color:var(--ink-soft);line-height:1.45;margin-top:7px;}

.flora-notice-card{
	background:var(--icy);border:1px solid var(--im);border-radius:var(--radius);padding:16px 18px;
	display:flex;gap:14px;align-items:flex-start;color:var(--ink-soft);font-size:.86rem;line-height:1.5;
}
.flora-notice-card b{display:block;color:var(--ink);margin-bottom:2px;}
.flora-notice-card .n-icon{font-size:1.4rem;line-height:1;}

.flora-side-mini-list{display:flex;flex-direction:column;gap:10px;}
.flora-side-row{display:flex;justify-content:space-between;gap:12px;font-size:.84rem;color:var(--ink-soft);border-bottom:1px solid var(--line-soft);padding-bottom:10px;}
.flora-side-row:last-child{border-bottom:none;padding-bottom:0;}
.flora-side-row b{color:var(--ink);}
.flora-live-chip{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);background:var(--icy);border:1px solid var(--im);border-radius:999px;padding:5px 9px;}
.flora-live-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);}
.flora-acct-linkout{display:block;text-align:center;background:var(--icy);border:1px solid var(--im);border-radius:var(--radius);padding:18px;font-size:.86rem;color:var(--ink);font-weight:800;text-decoration:none;}
.flora-acct-linkout span{display:block;font-weight:400;color:var(--ink-soft);font-size:.78rem;margin-top:4px;}

/* ===================================================================
   TABLES (orders, downloads, ledger)
=================================================================== */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .shop_table,
.flora-acct-table{
	width:100%;border-collapse:collapse;font-size:.85rem;border:none;
}
.woocommerce-account .woocommerce-orders-table thead th,
.flora-acct-table thead th{
	text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);
	padding:0 10px 10px;border-bottom:1.5px solid var(--line);font-weight:800;background:none;
}
.woocommerce-account .woocommerce-orders-table tbody td,
.flora-acct-table tbody td{
	padding:14px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;color:var(--ink);background:none;
}
.woocommerce-account .woocommerce-orders-table tbody tr:last-child td,
.flora-acct-table tbody tr:last-child td{border-bottom:none;}

.flora-acct-status{
	display:inline-block;font-size:.66rem;font-weight:800;padding:4px 10px;border-radius:999px;
	text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
	background:var(--icy);color:var(--acc);
}
.flora-acct-status.is-processing,.flora-acct-status.is-on-hold{background:rgba(162,123,91,.12);color:var(--ah);}
.flora-acct-status.is-cancelled,.flora-acct-status.is-refunded,.flora-acct-status.is-failed{background:rgba(44,54,57,.06);color:var(--ink-soft);}
.flora-acct-status.is-pending{background:#fff;border:1px solid var(--line);color:var(--ink-soft);}
.flora-pts-pos{color:var(--acc);font-weight:800;}
.flora-pts-pending{color:var(--ah);font-weight:800;}
.flora-pts-zero{color:var(--ink-soft);}

/* ===================================================================
   FORMS (account details, addresses)
=================================================================== */
.woocommerce-account .woocommerce-MyAccount-content form .form-row label,
.woocommerce-account .woocommerce-address-fields label{
	display:block;font-size:.78rem;font-weight:700;color:var(--ink-soft);margin-bottom:6px;
}
.woocommerce-account .woocommerce-MyAccount-content form input.input-text,
.woocommerce-account .woocommerce-MyAccount-content form textarea,
.woocommerce-account .woocommerce-MyAccount-content form select,
.woocommerce-account .woocommerce-MyAccount-content .select2-selection{
	width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid var(--line);
	background:var(--cream-2);font-size:.88rem;color:var(--ink);box-shadow:none;
}
.woocommerce-account .woocommerce-MyAccount-content form input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content form textarea:focus,
.woocommerce-account .woocommerce-MyAccount-content form select:focus{
	outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc);
}

/* -------------------------------------------------------------------
   Account Details form layout fix.
   First/Last name sit side-by-side (50/50); Display Name is a full
   width row on its own line with its help text beneath it. This
   overrides theme rules that were crushing the Display Name field into
   a sliver and overlapping its label with the Last Name column.
------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content form.edit-account .form-row{
	display:block;width:100%;box-sizing:border-box;margin:0 0 16px;clear:both;float:none;
}
.woocommerce-account .woocommerce-MyAccount-content form.edit-account .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content form.edit-account .form-row-last{
	display:inline-block;width:calc(50% - 9px);vertical-align:top;
}
.woocommerce-account .woocommerce-MyAccount-content form.edit-account .form-row-first{margin-right:16px;}
.woocommerce-account .woocommerce-MyAccount-content form.edit-account .form-row-wide{
	display:block;width:100%;clear:both;
}
.woocommerce-account .woocommerce-MyAccount-content form.edit-account .clear{
	clear:both;display:block;width:100%;height:0;
}
/* Display Name help text: full-width, quiet, no inherited caps/bold. */
.woocommerce-account .woocommerce-MyAccount-content form.edit-account .form-row-wide span,
.woocommerce-account .woocommerce-MyAccount-content form.edit-account .form-row-wide em{
	display:block;width:100%;margin-top:6px;font-style:normal;font-weight:400;
	font-size:.76rem;line-height:1.5;color:var(--ink-soft);text-transform:none;letter-spacing:0;
}
@media (max-width:600px){
	.woocommerce-account .woocommerce-MyAccount-content form.edit-account .form-row-first,
	.woocommerce-account .woocommerce-MyAccount-content form.edit-account .form-row-last{
		display:block;width:100%;margin-right:0;
	}
}

/* ===================================================================
   BUTTONS
=================================================================== */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-Button,
.flora-btn-primary{
	display:inline-flex;align-items:center;justify-content:center;gap:7px;
	background:var(--acc);color:#fff;padding:12px 22px;border-radius:999px;
	font-weight:700;font-size:.88rem;border:none;white-space:nowrap;text-decoration:none;line-height:1;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.flora-btn-primary:hover{background:var(--ah);color:#fff;}
.flora-btn-secondary{
	display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--paper);color:var(--ink);
	border:1.5px solid var(--line);padding:11px 20px;border-radius:999px;font-weight:700;font-size:.86rem;text-decoration:none;
}
.flora-btn-secondary:hover{border-color:var(--acc);color:var(--acc);}

/* ===================================================================
   ADDRESSES + PAYMENT PREFERENCE CARDS
=================================================================== */
.flora-address-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
@media (max-width:760px){.flora-address-grid{grid-template-columns:1fr;}}
.flora-address-card{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--paper);position:relative;}
.flora-address-card .tag{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--acc);margin-bottom:10px;}
.flora-address-card.is-preferred{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset;}
.flora-address-card h4{font-family:'Cinzel',Georgia,serif;margin:0 0 8px;font-size:1rem;font-weight:600;}
.flora-address-card address{font-style:normal;color:var(--ink-soft);font-size:.88rem;line-height:1.58;margin-bottom:16px;}

/* ===================================================================
   CHECKOUT — payment type + prototype harmonisation
=================================================================== */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment{
	background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.woocommerce-checkout #payment ul.payment_methods{
	border-bottom:1px solid var(--line-soft);padding:8px 20px;
}
.woocommerce-checkout #payment ul.payment_methods li{
	list-style:none;padding:10px 0;font-size:.9rem;
}
.woocommerce-checkout #payment ul.payment_methods li label{font-weight:700;color:var(--ink);}
.flora-pay-type-head{
	font-family:'Cinzel',Georgia,serif;font-size:1rem;font-weight:600;color:var(--ink);
	padding:16px 20px 4px;
}
.flora-pay-type-note{font-size:.8rem;color:var(--ink-soft);padding:0 20px 8px;line-height:1.5;}

/* Flora redemption card already styled by flora.css — harmonise radius/shadow only */
.flora-checkout-card{border-radius:var(--radius);}


/* ===================================================================
   ACCOUNT DETAILS — grid fix for the active theme's markup.
   The theme's form-edit-account.php renders fields inside
   .flora-acct .acct-form-grid with .full on the Display Name / Email
   rows, but the theme CSS only defined .fa-form-grid/.fa-full, so the
   grid never applied and the Display Name field collapsed into a sliver
   with its label overlapping Last Name. This plugin stylesheet loads on
   every account page, so these rules target the theme's real classes
   and win on specificity: First/Last share a row; Display Name + Email
   span the full width on their own line.
=================================================================== */
.flora-acct .acct-form-grid{
	display:grid !important;
	grid-template-columns:1fr 1fr;
	gap:0 16px;
}
.flora-acct .acct-form-grid > .form-row{ display:flex; flex-direction:column; }
.flora-acct .acct-form-grid > .full{ grid-column:1 / -1; }
/* Let the grid own the columns - neutralise the legacy inline-block widths. */
.flora-acct .acct-form-grid > .form-row-first,
.flora-acct .acct-form-grid > .form-row-last{
	display:flex; width:auto; margin:0;
}
@media (max-width:640px){
	.flora-acct .acct-form-grid{ grid-template-columns:1fr; }
}

/* ===================================================================
   FOOTER - full width across all My Account pages.
   The footer is rendered by the theme, but this plugin stylesheet loads
   on every account page, so it can force the footer's inner wrapper to
   full width here. Scoped to account pages only; inert if a given
   wrapper isn't present.
=================================================================== */
body.woocommerce-account .flora-footer__inner,
body.woocommerce-account .flora-footer__bottom{ max-width:100% !important; }
body.woocommerce-account #colophon .ast-container,
body.woocommerce-account .site-footer .ast-container,
body.woocommerce-account .site-primary-footer-wrap .ast-container,
body.woocommerce-account .site-below-footer-wrap .ast-container,
body.woocommerce-account .ast-builder-grid-row-container{
	max-width:100% !important; width:100% !important;
}