/* Account, sign in / sign up and order tracking. Form controls come from the booking form styles. */

/* ---------- Shared ---------- */
.sf-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: #EEF3F6; color: var(--ink-2); font: 800 .74rem/1.2 var(--head); white-space: nowrap; }
.sf-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.sf-pill--pending, .sf-pill--on-hold { background: #FFF4DC; color: #8A5A00; }
.sf-pill--processing { background: #E3F4FC; color: #075F86; }
.sf-pill--sf-out-for-delivery { background: #EDE7FF; color: #5B3FC4; }
.sf-pill--completed { background: #E3F9EA; color: #1E7A43; }
.sf-pill--cancelled, .sf-pill--failed, .sf-pill--refunded { background: #FDECEC; color: #B42318; }

.woocommerce-account .woocommerce-notices-wrapper:empty, .sf-trackpg .woocommerce-notices-wrapper:empty { display: none; }
.sf-auth .woocommerce-error, .sf-auth .woocommerce-message, .sf-auth .woocommerce-info,
.sf-acct .woocommerce-error, .sf-acct .woocommerce-message, .sf-acct .woocommerce-info { list-style: none; margin: 0 0 16px; padding: 12px 14px 12px 44px; position: relative; border-radius: 14px; font-weight: 600; font-size: .92rem; }
.sf-auth .woocommerce-error, .sf-acct .woocommerce-error { background: #FDECEC; color: #B42318; }
.sf-auth .woocommerce-message, .sf-acct .woocommerce-message { background: #E3F9EA; color: #1E7A43; }
.sf-auth .woocommerce-info, .sf-acct .woocommerce-info { background: #E3F4FC; color: #075F86; }
.sf-auth :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before,
.sf-acct :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before { content: "!"; position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: currentColor; color: #fff; font: 900 .75rem var(--head); }
.sf-auth .woocommerce-message::before, .sf-acct .woocommerce-message::before { content: "✓"; }
.sf-auth :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) li { margin: 0; }
.sf-acct :is(.woocommerce-message, .woocommerce-info) .button { float: right; margin-left: 12px; font-weight: 800; color: inherit; text-decoration: underline; background: none; border: 0; padding: 0; }

/* ---------- Sign in / sign up ---------- */
.sf-auth { display: grid; gap: 0; margin: 8px 0 48px; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -50px rgba(16,35,46,.55); border: 1px solid var(--line); }
.sf-auth__brand { position: relative; display: none; isolation: isolate; overflow: hidden; padding: 40px; background: radial-gradient(120% 90% at 0% 0%, #0B6E99 0%, var(--primary) 35%, #0A2F42 100%); color: #fff; }
.sf-auth__brand::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .08; background: url("../images/pattern.svg") center / 260px; }
.sf-auth__logo { display: block; width: 170px; height: auto; margin-bottom: 44px; }
.sf-auth__kicker { margin: 0 0 8px; font: 800 .74rem var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.sf-auth__big { margin: 0 0 28px; max-width: 18ch; font: 900 clamp(1.8rem, 2.6vw, 2.4rem)/1.1 var(--head); letter-spacing: -.02em; }
.sf-auth__perks { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.sf-auth__perks li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(4px); }
.sf-auth__perks li > span { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(27,184,236,.2); color: var(--sky); }
.sf-auth__perks .sf-i { width: 18px; height: 18px; }
.sf-auth__perks strong { display: block; font: 800 .95rem var(--head); }
.sf-auth__perks small { color: #B9D3DF; font-size: .84rem; }
.sf-auth__drop { position: absolute; z-index: -1; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.35), rgba(27,184,236,.15) 60%, transparent 70%); animation: sf-auth-float 9s ease-in-out infinite; }
.sf-auth__drop--1 { width: 220px; height: 220px; right: -60px; bottom: -40px; }
.sf-auth__drop--2 { width: 90px; height: 90px; right: 90px; top: 60px; animation-delay: -3s; opacity: .7; }
.sf-auth__drop--3 { width: 46px; height: 46px; left: 52%; bottom: 120px; animation-delay: -6s; opacity: .6; }
@keyframes sf-auth-float { 50% { transform: rotate(-45deg) translate(6px, -12px); } }

.sf-auth__main { display: grid; align-content: center; justify-items: center; padding: 28px 16px 24px; background: linear-gradient(180deg, #F6FBFE, #fff 40%); }
.sf-auth__card { width: min(100%, 440px); margin: 0; }
.sf-auth__head { margin-bottom: 18px; text-align: left; }
.sf-auth__title { margin: 0 0 6px; font: 900 clamp(1.6rem, 4vw, 2.1rem)/1.1 var(--head); letter-spacing: -.02em; color: var(--ink); }
.sf-auth__lead { margin: 0; color: var(--ink-2); font-size: .95rem; }
.sf-auth__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 18px; border-radius: 14px; background: #EEF3F6; box-shadow: inset 0 1px 2px rgba(16,35,46,.06); }
.sf-auth__tabs button { position: relative; z-index: 1; min-height: 42px; border: 0; background: none; border-radius: 10px; font: 800 .9rem var(--head); color: var(--ink-2); cursor: pointer; transition: color .2s; }
.sf-auth__tabs button[aria-selected="true"] { color: var(--primary); }
.sf-auth__tabbg { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: #fff; box-shadow: 0 8px 18px -10px rgba(7,95,134,.55), 0 0 0 1px rgba(7,95,134,.12); transition: transform .35s cubic-bezier(.2,.9,.3,1.1); }
.sf-auth__tabs[data-on="register"] .sf-auth__tabbg { transform: translateX(100%); }
.sf-auth__social { display: grid; gap: 8px; justify-items: stretch; margin-bottom: 4px; }
.sf-auth__social > * { max-width: 100%; }
.sf-auth__or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--mute); font: 700 .78rem var(--head); text-transform: uppercase; letter-spacing: .08em; }
.sf-auth__or::before, .sf-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sf-auth__panel { animation: sf-auth-in .35s ease both; }
@keyframes sf-auth-in { from { opacity: 0; transform: translateY(6px); } }
.sf-auth__form { display: grid; }
.sf-auth .sf-field > label { justify-content: space-between; }
.sf-auth__forgot { font: 700 .78rem var(--head); text-decoration: none; }
.sf-auth__row { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 14px; }
.sf-check { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-2); cursor: pointer; }
.sf-check input { width: 18px; height: 18px; accent-color: var(--primary); }
.sf-auth .sf-btn--block { justify-content: center; gap: 10px; }
.sf-auth__switch { margin: 16px 0 0; text-align: center; font-size: .9rem; color: var(--ink-2); }
.sf-auth__switch button, .sf-auth__switch a { padding: 0; border: 0; background: none; font: 800 .9rem var(--head); color: var(--primary); cursor: pointer; text-decoration: none; }
.sf-auth__switch button:hover, .sf-auth__switch a:hover { text-decoration: underline; }
.sf-auth__help { margin: 18px 0 0; font-size: .84rem; color: var(--mute); text-align: center; }
.sf-auth__names { gap: 0 12px; }
.sf-control--pw input { padding-right: 46px !important; }
.sf-pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: none; color: var(--mute); cursor: pointer; }
.sf-pw-toggle:hover, .sf-pw-toggle.is-on { color: var(--primary); background: #EAF6FB; }
.sf-pw-toggle .sf-i { width: 18px; height: 18px; }
.sf-pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.sf-pw-meter span { height: 4px; border-radius: 4px; background: #E3EAEE; transition: background .25s; }
.sf-pw-meter[data-s="1"] span:nth-child(-n+1) { background: #E5484D; }
.sf-pw-meter[data-s="2"] span:nth-child(-n+2) { background: #F5A524; }
.sf-pw-meter[data-s="3"] span:nth-child(-n+3) { background: #1BB8EC; }
.sf-pw-meter[data-s="4"] span { background: #2E9E5B; }
.sf-auth__sent { display: grid; justify-items: center; gap: 10px; text-align: center; }
.sf-auth__sent-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #E3F4FC; color: var(--primary); animation: sf-pop .5s cubic-bezier(.2,1.4,.4,1); }
.sf-auth__sent-ic .sf-i { width: 32px; height: 32px; }
.sf-auth__sent p { margin: 0; color: var(--ink-2); }
.sf-auth__tip { font-size: .85rem; color: var(--mute) !important; }
@keyframes sf-pop { from { transform: scale(.4); opacity: 0; } }

@media (min-width: 900px) {
	.sf-auth { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: 640px; margin-top: 16px; }
	.sf-auth__brand { display: block; }
	.sf-auth__main { padding: 48px 40px; }
}

/* ---------- Account layout ---------- */
.woocommerce-account .sf-main > .wp-block-post-content > .woocommerce { max-width: none; }
.sf-acct { display: grid; gap: 18px; margin: 8px 0 48px; }
.sf-acct__nav { padding: 12px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 40px -34px rgba(16,35,46,.5); align-self: start; }
.sf-acct__me { display: flex; align-items: center; gap: 12px; padding: 6px 6px 12px; border-bottom: 1px dashed var(--line); margin-bottom: 8px; }
.sf-acct__avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--sky), var(--primary)); color: #fff; font: 900 1.15rem var(--head); box-shadow: 0 8px 16px -8px rgba(7,95,134,.7); }
.sf-acct__who { display: grid; min-width: 0; }
.sf-acct__who strong { font: 900 1rem var(--head); }
.sf-acct__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); font-size: .8rem; }
.sf-acct__nav ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.sf-acct__nav ul::-webkit-scrollbar { display: none; }
.sf-acct__nav li { flex: none; }
.sf-acct__nav a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; color: var(--ink-2); font: 700 .9rem var(--head); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.sf-acct__nav a .sf-i { width: 18px; height: 18px; color: var(--mute); transition: color .2s; }
.sf-acct__nav a:hover { background: #F2F7FA; color: var(--ink); }
.sf-acct__nav a[aria-current="page"], .sf-acct__nav .is-active a { background: var(--ink); color: #fff; box-shadow: 0 10px 20px -12px rgba(16,35,46,.8); }
.sf-acct__nav a[aria-current="page"] .sf-i, .sf-acct__nav .is-active a .sf-i { color: var(--sky); }
.sf-acct__nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: #B42318; }
.sf-acct__nav .woocommerce-MyAccount-navigation-link--customer-logout a .sf-i { color: #E5484D; }
.sf-acct__content { min-width: 0; }
@media (min-width: 1024px) {
	.sf-acct { grid-template-columns: 270px minmax(0, 1fr); gap: 28px; margin-top: 16px; }
	.sf-acct__nav { position: sticky; top: calc(var(--bar-h) + 24px); padding: 14px; }
	.sf-acct__nav ul { flex-direction: column; overflow: visible; }
	.sf-acct__nav .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
}

/* ---------- Dashboard ---------- */
.sf-dash { display: grid; gap: 18px; }
.sf-dash__hero { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 16px; align-items: end; padding: 26px; border-radius: 26px; background: radial-gradient(120% 140% at 100% 0%, #0B6E99 0%, var(--primary) 40%, #0A2F42 100%); color: #fff; box-shadow: 0 30px 60px -40px rgba(7,95,134,.9); }
.sf-dash__kicker { margin: 0 0 4px; font: 800 .74rem var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.sf-dash__title { margin: 0 0 6px; font: 900 clamp(1.8rem, 4vw, 2.6rem)/1.05 var(--head); letter-spacing: -.02em; }
.sf-dash__lead { margin: 0; color: #CFE6F0; }
.sf-dash__cta { justify-self: start; background: #fff; color: var(--ink); }
.sf-dash__cta:hover { background: var(--sky); color: var(--ink); }
.sf-dash__bubble { position: absolute; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.3), rgba(27,184,236,.12) 60%, transparent 70%); }
.sf-dash__bubble--1 { width: 260px; height: 260px; right: -70px; top: -90px; }
.sf-dash__bubble--2 { width: 120px; height: 120px; right: 160px; bottom: -60px; }
.sf-dash__stats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.sf-dash__stats li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.sf-dash__stats li > span { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #EAF6FB; color: var(--primary); }
.sf-dash__stats .sf-i { width: 19px; height: 19px; }
.sf-dash__stats strong { font: 900 1.25rem/1.1 var(--head); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sf-dash__stats small { color: var(--mute); font-size: .8rem; }
.sf-dash__grid { display: grid; gap: 18px; }
.sf-dash__panel { padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.sf-dash__ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sf-dash__ph h2 { margin: 0; font: 900 1.1rem var(--head); }
.sf-dash__ph a { display: inline-flex; align-items: center; gap: 4px; font: 800 .85rem var(--head); text-decoration: none; }
.sf-dash__ph a .sf-i { width: 15px; height: 15px; }
.sf-dash__orders { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.sf-dash__orders a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; color: var(--ink); text-decoration: none; border: 1px solid transparent; transition: background .2s, border-color .2s, transform .2s; }
.sf-dash__orders a:hover { background: #F6FAFC; border-color: var(--line); transform: translateX(2px); }
.sf-dash__oimg { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; background: #F2F7FA; color: var(--mute); }
.sf-dash__oimg img { width: 100%; height: 100%; object-fit: cover; }
.sf-dash__otext { display: grid; gap: 3px; min-width: 0; }
.sf-dash__otext strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 .95rem var(--head); }
.sf-dash__otext em { font-style: normal; color: var(--mute); font-weight: 700; }
.sf-dash__otext small { color: var(--mute); font-size: .8rem; }
.sf-dash__bar { display: block; height: 5px; border-radius: 5px; background: #E8EFF3; overflow: hidden; max-width: 220px; }
.sf-dash__bar i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--primary)); }
.sf-dash__oend { display: grid; justify-items: end; gap: 6px; font-variant-numeric: tabular-nums; }
.sf-dash__oend strong { font: 900 .95rem var(--head); }
.sf-dash__empty { display: grid; justify-items: center; gap: 10px; padding: 24px 12px; text-align: center; }
.sf-dash__empty > span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #EAF6FB; color: var(--primary); }
.sf-dash__empty p { margin: 0; color: var(--ink-2); }
.sf-dash__empty strong { display: block; font: 900 1.05rem var(--head); color: var(--ink); }
.sf-dash__quick { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.sf-dash__quick a { display: grid; gap: 2px; padding: 14px; height: 100%; border-radius: 16px; background: #F6FAFC; border: 1px solid transparent; color: var(--ink); text-decoration: none; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.sf-dash__quick a > span { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 11px; background: #fff; color: var(--primary); box-shadow: 0 4px 10px -6px rgba(16,35,46,.35); transition: background .2s, color .2s; }
.sf-dash__quick .sf-i { width: 17px; height: 17px; }
.sf-dash__quick strong { font: 800 .92rem var(--head); }
.sf-dash__quick small { color: var(--mute); font-size: .78rem; }
.sf-dash__quick a:hover { background: #fff; border-color: var(--line); transform: translateY(-2px); box-shadow: 0 14px 26px -20px rgba(16,35,46,.6); }
.sf-dash__quick a:hover > span { background: var(--primary); color: #fff; }
.sf-dash__quick a.is-wa > span { background: #25D366; color: #fff; }
@media (min-width: 720px) {
	.sf-dash__hero { grid-template-columns: 1fr auto; padding: 34px; }
	.sf-dash__cta { justify-self: end; }
	.sf-dash__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sf-dash__quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.sf-dash__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
	.sf-dash__quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- WooCommerce account screens (orders, addresses, details) ---------- */
.sf-acct__content > h2, .sf-acct__content .woocommerce-column__title, .sf-acct__content .woocommerce-order-details__title { font: 900 1.2rem var(--head); margin: 18px 0 10px; }
.sf-acct__content table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; font-size: .92rem; }
.sf-acct__content table.shop_table th { padding: 12px 14px; background: #F6FAFC; font: 800 .74rem var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); text-align: left; }
.sf-acct__content table.shop_table td, .sf-acct__content table.shop_table tbody th { padding: 14px; border-top: 1px solid var(--line); vertical-align: middle; text-transform: none; letter-spacing: 0; font: inherit; color: var(--ink); background: none; }
.sf-acct__content table.shop_table tr:hover td { background: #FBFDFE; }
.sf-acct__content .woocommerce-orders-table__cell-order-number a { font: 900 .95rem var(--head); text-decoration: none; }
.sf-acct__content .woocommerce-orders-table__cell-order-status { font-weight: 700; }
.sf-acct__content .woocommerce-button, .sf-acct__content .button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin: 2px 4px 2px 0; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 800 .8rem var(--head); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.sf-acct__content .woocommerce-button:hover, .sf-acct__content .button:hover { border-color: var(--primary); color: var(--primary); }
.sf-acct__content .woocommerce-button.view { background: var(--ink); border-color: var(--ink); color: #fff; }
.sf-acct__content .woocommerce-button.pay { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.sf-acct__content .woocommerce-pagination { display: flex; gap: 8px; justify-content: space-between; margin-top: 14px; }
.sf-acct__content .woocommerce-Addresses { display: grid; gap: 14px; }
.sf-acct__content .woocommerce-Address { padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.sf-acct__content .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sf-acct__content .woocommerce-Address-title h2 { margin: 0; font: 900 1.05rem var(--head); }
.sf-acct__content address { font-style: normal; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 720px) { .sf-acct__content .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } .sf-acct__content .u-columns.col2-set { display: contents; } }
.sf-acct__content form.woocommerce-EditAccountForm, .sf-acct__content form.edit-account, .sf-acct__content .woocommerce-address-fields { padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.sf-acct__content .form-row { display: grid; gap: 6px; margin: 0 0 14px; }
.sf-acct__content .form-row label { font: 800 .82rem var(--head); color: var(--ink); }
.sf-acct__content .form-row .required { color: #E5484D; text-decoration: none; border: 0; }
.sf-acct__content :is(input.input-text, select, textarea) { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid #DCE6EC; border-radius: 14px; background: #fff; font: inherit; font-size: .95rem; color: var(--ink); box-shadow: 0 1px 2px rgba(16,35,46,.05); transition: border-color .15s, box-shadow .2s; }
.sf-acct__content textarea { min-height: 96px; padding: 12px 14px; }
.sf-acct__content :is(input.input-text, select, textarea):focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(27,184,236,.16); }
.sf-acct__content fieldset { margin: 18px 0 0; padding: 16px; border: 1px dashed var(--line); border-radius: 16px; }
.sf-acct__content fieldset legend { padding: 0 6px; font: 900 .95rem var(--head); }
.sf-acct__content form .button[type="submit"], .sf-acct__content form button[name="save_account_details"], .sf-acct__content form button[name="save_address"] { min-height: 48px; padding: 0 24px; background: var(--primary); border-color: var(--primary); color: #fff; font-size: .95rem; }
.sf-acct__content form .button[type="submit"]:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (min-width: 720px) { .sf-acct__content .form-row-first, .sf-acct__content .form-row-last { display: inline-grid; width: calc(50% - 7px); } .sf-acct__content .form-row-first { margin-right: 10px; } }
.sf-acct__content .woocommerce-order-details, .sf-acct__content .woocommerce-customer-details { margin-top: 18px; }
.sf-acct__content mark { background: #EAF6FB; color: var(--primary); padding: 1px 6px; border-radius: 6px; font-weight: 800; }

/* ---------- Order timeline card ---------- */
.sf-track-card { padding: 20px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -46px rgba(16,35,46,.6); }
.sf-track-card + * { margin-top: 18px; }
.sf-track-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sf-track-card__kicker { margin: 0 0 4px; font: 800 .74rem var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.sf-track-card__title { margin: 0 0 4px; font: 900 clamp(1.2rem, 3vw, 1.55rem)/1.15 var(--head); }
.sf-track-card__meta { margin: 0; color: var(--mute); font-size: .85rem; }
.sf-steps { --p: 0; position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 20px; padding: 0; counter-reset: s; }
.sf-steps::before, .sf-steps::after { content: ""; position: absolute; top: 17px; left: 12.5%; height: 4px; border-radius: 4px; }
.sf-steps::before { right: 12.5%; background: #E8EFF3; }
.sf-steps::after { width: calc(75% * var(--p)); background: linear-gradient(90deg, var(--sky), var(--primary)); transition: width .8s cubic-bezier(.2,.9,.3,1); }
.sf-steps li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; }
.sf-steps__dot { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 2px solid #DCE6EC; color: var(--mute); font: 900 .85rem var(--head); transition: background .3s, border-color .3s, color .3s, transform .3s; }
.sf-steps__dot .sf-i { width: 17px; height: 17px; }
.sf-steps__label { font: 700 .78rem/1.2 var(--head); color: var(--mute); }
.sf-steps li.is-done .sf-steps__dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.sf-steps li.is-now .sf-steps__dot { background: var(--sky); border-color: var(--sky); color: var(--ink); transform: scale(1.12); box-shadow: 0 0 0 6px rgba(27,184,236,.2); animation: sf-step-pulse 2.2s ease-in-out infinite; }
.sf-steps li.is-done .sf-steps__label, .sf-steps li.is-now .sf-steps__label { color: var(--ink); }
@keyframes sf-step-pulse { 50% { box-shadow: 0 0 0 11px rgba(27,184,236,.08); } }
.sf-track-card.is-cancelled, .sf-track-card.is-failed, .sf-track-card.is-refunded { border-color: #F4C7C7; }
.sf-track-card__items { list-style: none; display: grid; gap: 8px; margin: 0 0 14px; padding: 14px 0 0; border-top: 1px dashed var(--line); }
.sf-track-card__items li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sf-track-card__img { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: #F2F7FA; color: var(--mute); }
.sf-track-card__img img { width: 100%; height: 100%; object-fit: cover; }
.sf-track-card__name { font-weight: 700; }
.sf-track-card__name small { color: var(--mute); font-weight: 600; }
.sf-track-card__facts { display: grid; gap: 6px; margin: 0 0 16px; padding: 12px 14px; border-radius: 16px; background: #F6FAFC; font-size: .9rem; }
.sf-track-card__facts div { display: flex; justify-content: space-between; gap: 12px; }
.sf-track-card__facts dt { color: var(--mute); }
.sf-track-card__facts dd { margin: 0; font-weight: 700; text-align: right; }
.sf-track-card__facts .is-total { padding-top: 6px; border-top: 1px solid var(--line); }
.sf-track-card__facts .is-total dd { font: 900 1.1rem var(--head); }
.sf-track-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Tracking page ---------- */
.sf-trackpg { display: grid; gap: 22px; width: min(100%, 760px); margin: 8px auto 56px; }
.sf-trackpg__head { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding-top: 12px; }
.sf-trackpg__ic { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 6px; border-radius: 24px; background: linear-gradient(135deg, var(--sky), var(--primary)); color: #fff; box-shadow: 0 20px 40px -20px rgba(7,95,134,.9); animation: sf-truck 3s ease-in-out infinite; }
.sf-trackpg__ic .sf-i { width: 34px; height: 34px; }
@keyframes sf-truck { 50% { transform: translateX(6px) rotate(-3deg); } }
.sf-trackpg__head .sf-eyebrow { justify-content: center; }
.sf-trackpg__title { margin: 0; font: 900 clamp(2rem, 6vw, 3rem)/1.05 var(--head); letter-spacing: -.02em; }
.sf-trackpg__lead { margin: 0; max-width: 54ch; color: var(--ink-2); }
.sf-trackpg__form { margin: 0; padding: 20px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 70px -50px rgba(16,35,46,.6); }
.sf-trackpg__fields { display: grid; gap: 0 12px; align-items: end; }
.sf-trackpg__fields .sf-btn { min-height: 46px; margin-bottom: 16px; justify-content: center; gap: 8px; }
.sf-trackpg__how { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line); }
.sf-trackpg__how li { display: grid; justify-items: center; gap: 6px; font: 700 .76rem var(--head); color: var(--mute); text-align: center; }
.sf-trackpg__how span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #F2F7FA; color: var(--primary); }
.sf-trackpg__how .sf-i { width: 16px; height: 16px; }
.sf-trackpg__again { margin: 14px 0 0; text-align: center; }
.sf-trackpg__again a { display: inline-flex; align-items: center; gap: 6px; font: 800 .9rem var(--head); text-decoration: none; }
.sf-trackpg__again .sf-i { width: 16px; height: 16px; }
.sf-trackpg__mine { display: grid; gap: 8px; }
.sf-trackpg__mine h2 { margin: 0 0 4px; font: 900 1.05rem var(--head); }
.sf-trackpg__mini { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.sf-trackpg__mini small { grid-column: 1; grid-row: 2; color: var(--mute); }
.sf-trackpg__mini .sf-pill { grid-row: span 2; }
.sf-trackpg__mini > .sf-i { grid-row: span 2; width: 16px; height: 16px; color: var(--mute); }
.sf-trackpg__mini:hover { border-color: var(--primary); transform: translateX(2px); }
.sf-trackpg__signin { margin: 0; text-align: center; color: var(--ink-2); }
@media (min-width: 720px) {
	.sf-trackpg__form { padding: 28px; }
	.sf-trackpg__fields { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; }
}
@media (max-width: 519px) { .sf-steps__label { font-size: .7rem; } .sf-steps__dot { width: 32px; height: 32px; } .sf-steps::before, .sf-steps::after { top: 14px; } }
@media (prefers-reduced-motion: reduce) { .sf-auth__drop, .sf-trackpg__ic, .sf-steps li.is-now .sf-steps__dot { animation: none; } }

/* WooCommerce 8+ notice banners. */
:is(.sf-auth, .sf-acct, .sf-trackpg) .wc-block-components-notice-banner { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; border: 0; background: #E3F4FC; color: #075F86; font-weight: 600; font-size: .92rem; line-height: 1.45; }
:is(.sf-auth, .sf-acct, .sf-trackpg) .wc-block-components-notice-banner > svg { flex: none; width: 20px; height: 20px; padding: 2px; border-radius: 50%; background: currentColor; fill: #fff; }
:is(.sf-auth, .sf-acct, .sf-trackpg) .wc-block-components-notice-banner.is-error { background: #FDECEC; color: #B42318; }
:is(.sf-auth, .sf-acct, .sf-trackpg) .wc-block-components-notice-banner.is-success { background: #E3F9EA; color: #1E7A43; }
:is(.sf-auth, .sf-acct, .sf-trackpg) .wc-block-components-notice-banner.is-warning { background: #FFF4DC; color: #8A5A00; }
:is(.sf-auth, .sf-acct, .sf-trackpg) .wc-block-components-notice-banner__content { flex: 1; min-width: 0; }
:is(.sf-auth, .sf-acct, .sf-trackpg) .wc-block-components-notice-banner a { color: inherit; font-weight: 800; }

/* ---------- Neutralise WooCommerce's default account CSS inside the theme layout ---------- */
.woocommerce-account .sf-acct .woocommerce-MyAccount-navigation,
.woocommerce-account .sf-acct .woocommerce-MyAccount-content { float: none; width: auto; margin: 0; }
.woocommerce-account .sf-acct .woocommerce-MyAccount-content { padding: 0; border: 0; background: none; }
.woocommerce-account .sf-acct .sf-acct__nav ul li { margin: 0; padding: 0; border: 0; list-style: none; }
.woocommerce-account .sf-acct .sf-acct__nav ul li a { padding: 10px 14px; text-decoration: none; border: 0; }
.woocommerce-account .sf-acct .sf-acct__nav ul li.is-active a,
.woocommerce-account .sf-acct .sf-acct__nav ul li a[aria-current="page"] { background: var(--ink); color: #fff; box-shadow: 0 10px 20px -12px rgba(16,35,46,.8); }
.woocommerce-account .sf-acct .sf-acct__nav ul li.is-active a .sf-i { color: var(--sky); }
.woocommerce-account .sf-acct .sf-acct__nav ul li.woocommerce-MyAccount-navigation-link--customer-logout a { background: none; box-shadow: none; color: #B42318; }
.sf-acct { width: 100%; max-width: 100%; }
.sf-acct, .sf-acct * { box-sizing: border-box; }
.sf-acct__content { overflow-wrap: anywhere; }
.sf-dash .sf-dash__title { color: #fff; }
.sf-dash .sf-dash__title, .sf-dash .sf-dash__lead { text-shadow: 0 1px 1px rgba(0,0,0,.15); }
.sf-auth form.login, .sf-auth form.register, .sf-auth form.lost_reset_password { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
/* WooCommerce wraps password inputs and adds its own eye button: keep ours. */
.sf-auth .password-input, .sf-acct .password-input { display: contents; }
.sf-auth .show-password-input, .sf-acct .show-password-input { display: none !important; }
.sf-auth .sf-control input, .sf-acct .sf-control input { width: 100%; }

/* Single column on phones must not grow with the scrolling menu chips. */
.sf-acct { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .sf-acct { grid-template-columns: 270px minmax(0, 1fr); } }
.woocommerce .sf-auth form.login, .woocommerce .sf-auth form.register, .woocommerce .sf-auth form.lost_reset_password, .woocommerce-page .sf-auth form.login, .woocommerce-page .sf-auth form.register { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.woocommerce-account .sf-acct .sf-acct__nav ul { margin: 0; padding: 0; }
.sf-auth .sf-field > label { justify-content: flex-start; }
.sf-auth .sf-field > label:has(.sf-auth__forgot) { justify-content: space-between; }
.sf-auth .woocommerce-privacy-policy-text p, .sf-auth .woocommerce-privacy-policy-text { margin: 2px 0 14px; font-size: .78rem; line-height: 1.5; color: var(--mute); }
.sf-auth .woocommerce-privacy-policy-text a { color: var(--ink-2); }