/* Hockey Therapy member platform — premium film-room theme (brand guide v1).
   Black/charcoal surfaces, ice-blue #62C8F4 accents, Archivo Black headings, Montserrat UI. */
body.ht-app {
	--bg:        #050A0F;  /* dashboard main background */
	--bg-2:      #0A121A;  /* sidebar */
	--panel:     #111C26;  /* cards / panels */
	--card:      #0B141D;  /* video cards */
	--rink:      #071018;  /* deep charcoal — topbar, deep surfaces */
	--ice:       #62C8F4;  /* accent */
	--ice-hover: #66D2FF;
	--border:    #20313D;  /* panel / card borders */
	--card-border:#1D2D38;
	--text:      #FFFFFF;
	--text-2:    #BFC8D0;  /* secondary copy */
	--muted:     #7E8B96;  /* inactive / metadata */
	--ink:       #071018;  /* text on ice-blue */
	--radius:    8px;
	--radius-btn:2px;
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}
body.ht-app * { box-sizing: border-box; }
body.ht-app h1, body.ht-app h2, body.ht-app h3 {
	font-family: "Archivo Black", "Montserrat", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .5px;
	line-height: 1.05;
}
.ht-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Top bar */
.ht-topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 28px; border-bottom:1px solid var(--border); background:var(--rink); }
.ht-logo { font-family:"Archivo Black",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.5px; color:#fff; font-size:1.1rem; text-decoration:none; display:flex; align-items:center; }
.ht-logo img { height:46px; width:auto; display:block; }
.ht-logo span, .ht-logo b { color:var(--ice); }
.ht-avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--panel); color:var(--ice); border:2px solid var(--ice); font-weight:800; font-size:.85rem; }
.ht-user { display:flex; align-items:center; gap:12px; }
.ht-user-name { color:var(--text-2); font-size:.82rem; text-transform:uppercase; letter-spacing:.5px; }
.ht-logout { color:#fff; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; text-decoration:none; border:1px solid rgba(255,255,255,.5); border-radius:var(--radius-btn); padding:9px 16px; transition:.15s; }
.ht-logout:hover { background:var(--ice); border-color:var(--ice); color:var(--ink); }
@media (max-width:640px){ .ht-user-name { display:none; } }

/* Mobile nav: hamburger + slide-in drawer (desktop hides these; drawer behavior lives in the 680px query) */
.ht-topbar-left { display:flex; align-items:center; gap:14px; }
.ht-burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:42px; padding:0 10px; background:transparent; border:1px solid var(--border); border-radius:var(--radius-btn); cursor:pointer; }
.ht-burger span { display:block; height:2px; width:100%; background:#fff; border-radius:2px; }
.ht-burger:hover { border-color:var(--ice); }
.ht-sidebar-close { display:none; width:36px; height:36px; margin:0 4px 12px auto; background:transparent; border:1px solid var(--border); border-radius:var(--radius-btn); color:#fff; font-size:1rem; line-height:1; cursor:pointer; }
.ht-sidebar-close:hover { border-color:var(--ice); color:var(--ice); }
.ht-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1050; opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; }

.ht-body { display:flex; flex:1; }

/* Sidebar */
.ht-sidebar { width:230px; flex:0 0 230px; background:var(--bg-2); border-right:1px solid var(--border); padding:22px 14px; }
.ht-nav-group { margin-bottom:26px; }
.ht-nav-label { display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 10px 10px; }
.ht-nav-item { display:block; padding:9px 12px; border-radius:var(--radius-btn); color:var(--text-2); text-decoration:none; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; transition:.15s; }
.ht-nav-item:hover { background:rgba(255,255,255,.05); color:#fff; }
.ht-nav-item.is-active { background:rgba(98,200,244,.12); color:var(--ice); box-shadow:inset 3px 0 0 var(--ice); }
/* Crown marks the family owner (the parent). Driven by the owner flag, not by "you", so a child
   sees it on their parent's entry too. The icon is decorative; .ht-sr-only carries the meaning. */
.ht-nav-item .ht-crown { display:inline-block; margin-left:6px; vertical-align:-1px; color:var(--ice); }
.ht-nav-item.is-active .ht-crown { color:var(--ice); }
.ht-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Main */
.ht-main { flex:1; padding:26px 32px; max-width:1200px; }
.ht-section-title { font-size:1.4rem; margin:24px 0 14px; }
.ht-row-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:28px; flex-wrap:wrap; }
.ht-row-tools { display:flex; align-items:center; gap:16px; }
.ht-search { width:240px; max-width:100%; background:var(--rink); border:1px solid var(--card-border); border-radius:var(--radius-btn); color:#fff; padding:9px 13px; font-family:"Montserrat",sans-serif; font-size:.85rem; }
.ht-search::placeholder { color:var(--muted); }
.ht-search:focus { outline:none; border-color:var(--ice); box-shadow:0 0 0 3px rgba(98,200,244,.3); }
.ht-link { color:var(--ice); text-decoration:none; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; white-space:nowrap; }
.ht-meta { color:var(--muted); font-size:.8rem; }

/* Welcome banner */
.ht-banner { display:flex; align-items:center; gap:14px; background:rgba(98,200,244,.10); border:1px solid var(--border); border-left:3px solid var(--ice); border-radius:var(--radius); padding:16px 18px; }
.ht-banner-check { width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:var(--ice); color:var(--ink); display:grid; place-items:center; font-weight:800; }
.ht-banner-text { display:flex; flex-direction:column; gap:2px; flex:1; }
.ht-banner-text strong { font-weight:800; text-transform:uppercase; letter-spacing:.5px; font-size:.92rem; }
.ht-banner-text span { color:var(--text-2); font-size:.88rem; }
.ht-banner-dismiss { background:transparent; border:none; color:var(--ice); cursor:pointer; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; }

/* Featured */
.ht-featured { display:flex; gap:20px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; text-decoration:none; color:var(--text); transition:.16s; }
.ht-featured:hover { border-color:var(--ice); box-shadow:0 0 0 1px rgba(98,200,244,.35), 0 14px 34px rgba(0,0,0,.5); }
.ht-featured-thumb { flex:0 0 46%; aspect-ratio:16/9; border-radius:6px; background:var(--rink); display:grid; place-items:center; }
.ht-featured-body { display:flex; flex-direction:column; justify-content:center; gap:10px; }
.ht-featured-body h3 { margin:0; font-size:1.5rem; }
.ht-play { width:54px; height:54px; border-radius:50%; background:rgba(0,0,0,.45); border:1.5px solid var(--ice); color:var(--ice); display:grid; place-items:center; font-size:1.1rem; }

/* Buttons — primary = ice fill / dark text / squared; secondary = ghost -> ice on hover */
.ht-btn { align-self:flex-start; display:inline-block; background:var(--ice); color:var(--ink); font-family:"Montserrat",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.6px; font-size:.8rem; padding:14px 22px; border:1px solid var(--ice); border-radius:var(--radius-btn); text-decoration:none; cursor:pointer; box-shadow:0 4px 16px rgba(98,200,244,.22); transition:.15s; }
.ht-btn:hover { background:var(--ice-hover); border-color:var(--ice-hover); }
.ht-btn-ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55); box-shadow:none; }
.ht-btn-ghost:hover { background:var(--ice); border-color:var(--ice); color:var(--ink); }

/* Recommended grid — video cards */
.ht-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ht-card { background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:10px; text-decoration:none; color:var(--text); transition:.16s; }
.ht-card:hover { transform:translateY(-2px); border-color:var(--ice); box-shadow:0 0 0 1px rgba(98,200,244,.4), 0 12px 28px rgba(0,0,0,.55); }
.ht-card-thumb { aspect-ratio:16/9; border-radius:5px; background:var(--rink); display:grid; place-items:center; margin-bottom:9px; }
.ht-card-thumb .ht-play { width:42px; height:42px; font-size:.9rem; }
.ht-card-title { font-weight:600; font-size:.9rem; margin-bottom:3px; line-height:1.3; }

/* Search-first list view (dashboard "all categories") */
/* One definition for every search field, with a size modifier rather than a second
   independent block. The two bars had already drifted in padding and font size,
   which is what happens to a control defined twice. */
/* No right padding on the bar: the field's outline reaches its inner edge instead of
   stopping 17px short of it (HT-144). The field carries that padding instead. */
.ht-searchbar { display:flex; align-items:center; gap:12px; background:var(--rink); border:1px solid var(--card-border); border-radius:var(--radius); padding:0 0 0 16px; margin:22px 0 16px; }
.ht-searchbar:focus-within { border-color:var(--ice); box-shadow:0 0 0 3px rgba(98,200,244,.3); }
.ht-searchbar-icon { flex:0 0 auto; color:var(--muted); }
/* hello-elementor's reset styles input[type=search] directly — border, border-radius,
   padding, transition, width — and the rule below exists to take those back. Four parts
   of it a reader would otherwise undo as pointless:

   Scoped through .ht-searchbar because input.ht-searchbar-input is (0,1,1) and so is
   input[type=search] — they TIE, and a tie is settled by load order, which ht-app does
   not control. Through the container it is (0,2,1) and the cascade decides it.

   var(--muted) rather than the bar's own border colour. HT-144 chose to keep this
   outline, not remove it; at --card-border it measures 1.35:1 against the bar, reads
   as gone, and gets deleted as dead code by the next person to touch this.

   Negative margin on the RIGHT only. Pulling top and bottom over the bar's border too
   overpaints it from the field's left edge rightward, and the field does not start at
   the bar's left edge — the icon does — so the bar turns two-tone past the magnifier.

   transition:none because the reset ships transition:all .3s and the bar's focus ring
   does not animate, so the border would fade to ice while the bar snapped. */
.ht-searchbar input.ht-searchbar-input {
	flex:1; min-width:0; width:auto;
	align-self:stretch;  /* flush top and bottom even if anything in the row grows taller */
	background:transparent; color:#fff;
	font-family:"Montserrat",sans-serif; font-size:.95rem;
	border:1px solid var(--muted);
	border-radius:0 var(--radius) var(--radius) 0;
	padding:15px 16px;
	margin:0 -1px 0 0;   /* only the right edge sits on the bar's border, so the two meet */
	transition:none;     /* the reset ships transition:all .3s; the bar's ring does not animate */
}
.ht-searchbar-input::placeholder { color:var(--muted); }
.ht-searchbar input.ht-searchbar-input:focus { outline:none; box-shadow:none; }
/* The left edge is the only one not touching the bar, so it is the only one that shows
   on its own. Taking it to ice draws a blue seam across the middle of an already-ringed
   bar; it stays muted and the ring does the work. */
.ht-searchbar:focus-within input.ht-searchbar-input { border-color:var(--ice); border-left-color:var(--muted); }
/* Small: the size the Up Next rail uses. */
.ht-searchbar-sm { gap:8px; border-radius:var(--radius-btn); padding:0 0 0 12px; margin:0 0 12px; }
.ht-searchbar-sm input.ht-searchbar-input { border-radius:0 var(--radius-btn) var(--radius-btn) 0; padding:9px 12px; font-size:.85rem; }

.ht-filters { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.ht-filter { flex:1 1 0; min-width:0; width:auto; appearance:none; -webkit-appearance:none; background:var(--rink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237E8B96' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; border:1px solid var(--card-border); border-radius:999px; color:var(--text-2); padding:10px 32px 10px 15px; font-family:"Montserrat",sans-serif; font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.4px; cursor:pointer; text-overflow:ellipsis; }
.ht-filter:focus { outline:none; border-color:var(--ice); box-shadow:0 0 0 3px rgba(98,200,244,.25); }
.ht-filter:disabled { opacity:.45; cursor:not-allowed; }
.ht-filter option { background:var(--bg); color:#fff; }
.ht-results-count { flex:1 1 100%; text-align:right; color:var(--muted); font-size:.8rem; margin:0; }

.ht-list { display:flex; flex-direction:column; gap:12px; }
/* "Start here" featured shelf — sits above the grid, styled like the list but separate. */
.ht-starthere { margin-bottom:28px; }
.ht-starthere-title { font-family:"Archivo Black","Montserrat",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.5px; font-size:1rem; color:#fff; margin:0 0 12px; }
.ht-starthere-list { display:flex; flex-direction:column; gap:12px; }
.ht-row { display:flex; align-items:center; gap:16px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px; text-decoration:none; color:var(--text); transition:.16s; }
.ht-row:hover { border-color:var(--ice); box-shadow:0 0 0 1px rgba(98,200,244,.35), 0 10px 26px rgba(0,0,0,.5); }
.ht-row-thumb { flex:0 0 124px; width:124px; aspect-ratio:16/9; border-radius:6px; background:var(--rink) center/cover no-repeat; display:grid; place-items:center; }
.ht-row-thumb .ht-play { width:40px; height:40px; font-size:.85rem; }
.ht-row-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.ht-row-title { font-weight:600; font-size:.95rem; line-height:1.3; }
.ht-row-tags { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* The one-line summary on a row. Written at ingest for every clip and, until now, rendered
   nowhere: rows were a title, some chips and a duration. Clamped to two lines so a long one
   cannot push the row height around. */
.ht-row-summary { font-size:.85rem; line-height:1.4; color:var(--text-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* var(--text-2), not a hex. These two rules were the only text in the app not using
   the palette, and the greys they carried were light-theme values: #3d3d3d measured
   1.73:1 against the page and #5a5a5a 2.54:1 against a card, where AA asks 4.5. */
.ht-watch-summary { margin:.75rem 0 0; font-size:.95rem; line-height:1.5; color:var(--text-2); max-width:70ch; }

.ht-tag { font-size:.72rem; font-weight:600; padding:3px 11px; border-radius:999px; white-space:nowrap; }
.ht-tag-cat { color:var(--ice); border:1px solid rgba(98,200,244,.5); background:rgba(98,200,244,.08); }
.ht-tag-dur { color:var(--text-2); border:1px solid var(--card-border); background:var(--rink); }
.ht-row-watch { flex:0 0 auto; background:var(--ice); color:var(--ink); font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:.76rem; padding:11px 24px; border-radius:var(--radius-btn); }
.ht-row:hover .ht-row-watch { background:var(--ice-hover); }

/* Video item hover + link states. Pin titles crisp by default so a visited link (a row you've
   already opened) doesn't inherit the theme's muted visited color, and turn the title ice on hover
   (keeping the card background) so hover reads like the buttons / left nav. Applies across the
   dashboard list, the "Start here" shelf, the grid cards, and the watch-page "Up next" list. */
.ht-row:link, .ht-row:visited,
.ht-card:link, .ht-card:visited,
.ht-upnext-item:link, .ht-upnext-item:visited { color:var(--text); }
.ht-row:hover .ht-row-title,
.ht-card:hover .ht-card-title,
.ht-upnext-item:hover .ht-upnext-text { color:var(--ice); }

@media (max-width:640px){
	.ht-row { flex-wrap:wrap; }
	.ht-row-thumb { flex-basis:92px; width:92px; }
	.ht-row-watch { width:100%; text-align:center; margin-top:4px; }
}

@media (max-width:1000px){ .ht-grid{ grid-template-columns:repeat(2,1fr);} .ht-featured{flex-direction:column;} .ht-featured-thumb{flex:none;width:100%;} }
@media (max-width:680px){
	.ht-grid{ grid-template-columns:1fr 1fr; }
	.ht-burger { display:flex; }
	.ht-sidebar-close { display:block; }
	.ht-sidebar {
		position:fixed; top:0; left:0; height:100%; z-index:1100;
		width:284px; max-width:84vw;
		transform:translateX(-100%); transition:transform .26s ease;
		overflow-y:auto; box-shadow:2px 0 44px rgba(0,0,0,.6);
	}
	body.ht-menu-open { overflow:hidden; }
	body.ht-menu-open .ht-sidebar { transform:translateX(0); }
	body.ht-menu-open .ht-backdrop { opacity:1; visibility:visible; }
}

/* Watch view */
.ht-watch { width:100%; padding:24px 40px; max-width:1480px; margin:0 auto; }
.ht-back { color:var(--ice); text-decoration:none; font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:.78rem; display:inline-block; margin-bottom:14px; }
.ht-watch-grid { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:28px; align-items:start; }
.ht-player { min-width:0; }
.ht-player .wp-block-video, .ht-player video, .ht-player iframe, .ht-player > div { width:100%; border-radius:var(--radius); overflow:hidden; }
.ht-watch-title { margin:16px 0 4px; font-size:1.6rem; }
/* HT-112: the thumbs sit on the title row, pushed right. The row keeps the title's existing
   margins so nothing below it moves. Pressed state is a filled icon plus a background and a
   border, never colour on its own, since colour alone fails 1.4.1 and is invisible to anyone
   who cannot separate the ice blue from the muted grey. */
/* Visually hidden but read aloud. NOTE the HT-97 branch introduces this same utility for the
   family crown; whichever lands second should drop its duplicate rather than keep both. */
.ht-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ht-watch-titlerow { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.ht-watch-titlerow .ht-watch-title { flex:1 1 auto; min-width:0; }
.ht-rating { display:flex; align-items:center; gap:8px; flex:0 0 auto; margin:16px 0 4px; }
.ht-rating-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; background:transparent; border:1px solid var(--border); border-radius:var(--radius-btn); color:var(--muted); cursor:pointer; transition:.15s; }
/* background is restated on every state on purpose. hello-elementor's reset.css styles bare
   button:hover and button:focus with background-color:#c36, so any state that leaves background
   unset inherits a crimson fill. Same leak as HT-78 on the tier cards. */
.ht-rating-btn:hover { background:rgba(255,255,255,.06); border-color:var(--ice); color:#fff; }
.ht-rating-btn:focus { background:rgba(255,255,255,.06); color:#fff; }
.ht-rating-btn:focus-visible { outline:none; background:rgba(255,255,255,.06); border-color:var(--ice); box-shadow:0 0 0 3px rgba(98,200,244,.3); }
.ht-rating-btn[aria-pressed="true"]:hover,
.ht-rating-btn[aria-pressed="true"]:focus { background:rgba(98,200,244,.2); border-color:var(--ice); color:var(--ice); }
.ht-rating-btn .ht-thumb { fill:none; stroke:currentColor; stroke-width:1.6; }
.ht-rating-btn[data-vote="down"] .ht-thumb { transform:rotate(180deg); }
/* Cast: filled thumb, tinted panel, ice border. Three cues, one of them not colour. */
.ht-rating-btn[aria-pressed="true"] { background:rgba(98,200,244,.12); border-color:var(--ice); color:var(--ice); }
.ht-rating-btn[aria-pressed="true"] .ht-thumb { fill:currentColor; stroke:currentColor; }
@media (max-width:900px){
	.ht-watch-titlerow { flex-wrap:wrap; }
	.ht-rating { margin-top:0; }
}
.ht-upnext { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px; }
.ht-upnext-item { display:flex; gap:10px; padding:8px; border-radius:var(--radius-btn); text-decoration:none; color:var(--text); }
.ht-upnext-item:hover { background:rgba(255,255,255,.05); }
.ht-upnext-thumb { flex:0 0 96px; height:56px; border-radius:5px; background:var(--rink); }
.ht-upnext-text { font-size:.84rem; line-height:1.3; }
/* The rail's search bar is .ht-searchbar.ht-searchbar-sm above. This is only the
   message shown when it matches nothing. */
.ht-upnext-empty { color:var(--muted); font-size:.84rem; padding:6px 4px; }
.ht-empty { color:var(--muted); padding:30px 0; }
@media (max-width:900px){ .ht-watch-grid{ grid-template-columns:1fr; } }

/* Poster previews + player stage */
.ht-featured-thumb, .ht-card-thumb, .ht-upnext-thumb { background-size:cover; background-position:center; }
.ht-player-stage { position:relative; aspect-ratio:16/9; width:100%; background-color:var(--rink); background-size:cover; background-position:center; border-radius:var(--radius); overflow:hidden; }
.ht-player-stage > *, .ht-player-stage iframe, .ht-player-stage video, .ht-player-stage .scout-vdo-player-container { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:0; }
/* Play affordance (button.scout-vdo-play-button injected by scout-vdocipher/player.js).
   Cover the stage; center a circular ice-blue play control. Label hidden but kept for a11y. */
.scout-vdo-play-button { display:flex; align-items:center; justify-content:center; padding:0; margin:0; background:rgba(5,10,15,.35); border:0; cursor:pointer; font-size:0; color:transparent; transition:background .15s; }
.ht-player-stage .scout-vdo-play-button { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; }
.scout-vdo-play-button::before { content:""; width:74px; height:74px; border-radius:50%; background:var(--ice); box-shadow:0 8px 28px rgba(0,0,0,.5); transition:background .15s, transform .15s; }
.scout-vdo-play-button::after { content:""; position:absolute; width:0; height:0; border-style:solid; border-width:15px 0 15px 24px; border-color:transparent transparent transparent var(--ink); margin-left:5px; pointer-events:none; }
.scout-vdo-play-button:hover { background:rgba(5,10,15,.2); }
.scout-vdo-play-button:hover::before { background:var(--ice-hover); transform:scale(1.06); }
.scout-vdo-play-button:focus-visible { outline:none; }
.scout-vdo-play-button:focus-visible::before { box-shadow:0 0 0 4px rgba(98,200,244,.45); }
.scout-vdo-player-error { display:flex; align-items:center; justify-content:center; height:100%; margin:0; padding:0 24px; text-align:center; color:var(--text-2); font-size:.9rem; }
/* HT-1: the engine's autoplay "Up Next" overlay (.scout-vdo-nextup) sets an inline
   align-items:flex-start, pinning it to the left of the player. Center it over the frame.
   The inline style isn't !important, so this stylesheet rule wins. */
body.ht-app .scout-vdo-nextup { align-items:center !important; text-align:center; }

/* Login page */
body.ht-login-page { display:flex; min-height:100vh; align-items:center; justify-content:center; background:var(--rink); }
.ht-login-wrap { width:100%; padding:24px; display:flex; justify-content:center; }
.ht-login-card { width:100%; max-width:400px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:36px 30px; box-shadow:0 24px 70px rgba(0,0,0,.6); }
.ht-login-card .ht-logo { display:block; text-align:center; margin-bottom:10px; }
.ht-login-card .ht-logo img { height:110px; width:auto; display:inline-block; }
.ht-login-title { text-align:center; margin:0 0 24px; font-size:1.6rem; }
.ht-field { display:block; margin-bottom:16px; color:var(--text-2); font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:.74rem; }
.ht-field input { width:100%; margin-top:7px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-btn); color:var(--text); padding:13px 15px; font-size:1rem; font-family:"Montserrat",sans-serif; text-transform:none; letter-spacing:0; font-weight:400; }
.ht-field input:focus { outline:none; border-color:var(--ice); box-shadow:0 0 0 3px rgba(98,200,244,.3); }
.ht-btn-block { display:block; width:100%; text-align:center; box-sizing:border-box; margin-top:10px; }
.ht-forgot-link { display:block; text-align:center; margin-top:16px; color:var(--ice); text-decoration:none; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
/* The login page loads the theme, whose default a:hover is a dark color that made these ice links
   fade into the dark background. Force them to white on hover instead. */
body.ht-login-page .ht-forgot-link:hover { color:#fff !important; }
.ht-login-msg { border-radius:var(--radius-btn); padding:11px 14px; margin-bottom:16px; font-size:.88rem; }
.ht-login-error { background:rgba(245,179,1,.12); border:1px solid rgba(245,179,1,.4); color:#F5B301; }
.ht-login-notice { background:rgba(98,200,244,.12); border:1px solid var(--border); color:var(--ice); }
.ht-forgot-intro { color:var(--text-2); font-size:.88rem; margin:0 0 14px; }

/* Account / Settings — WooCommerce My Account, skinned to the film-room theme */
.ht-account-main { max-width:1060px; margin:0 auto; min-width:0; }
.ht-account-main .ht-back, .ht-account-main .ht-section-title { text-align:left; }
.ht-account-main .ht-section-title { margin-top:12px; }
.ht-account-main .woocommerce { display:flex; align-items:flex-start; gap:24px; width:100%; }
.ht-account-main .woocommerce-MyAccount-navigation { flex:0 0 200px; width:200px; max-width:200px; float:none; }
.ht-account-main .woocommerce-MyAccount-navigation ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ht-account-main .woocommerce-MyAccount-navigation li { width:100%; }
.ht-account-main .woocommerce-MyAccount-navigation li a { display:block; width:100%; padding:11px 16px; border:1px solid var(--border); border-radius:var(--radius-btn); color:var(--text-2); text-decoration:none; text-transform:uppercase; letter-spacing:.5px; font-size:.72rem; font-weight:700; transition:.15s; }
.ht-account-main .woocommerce-MyAccount-navigation li a:hover { border-color:var(--ice); color:#fff; }
.ht-account-main .woocommerce-MyAccount-navigation li.is-active a { background:var(--ice); border-color:var(--ice); color:var(--ink); }
/* Nested Family sub-items (Members / Add Member / Family Settings) under "Family" */
.ht-account-main .woocommerce-MyAccount-navigation li.ht-subitem a { padding-left:30px; font-size:.68rem; border-color:transparent; border-left:2px solid var(--border); border-radius:0 var(--radius-btn) var(--radius-btn) 0; }
.ht-account-main .woocommerce-MyAccount-navigation li.ht-subitem a:hover { border-color:transparent; border-left-color:var(--ice); color:#fff; }
.ht-account-main .woocommerce-MyAccount-navigation li.ht-subitem.is-active a { border-left-color:var(--ice); }
.ht-account-main .woocommerce-MyAccount-content { flex:1 1 auto; min-width:0; max-width:none; width:auto; float:none; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; color:var(--text-2); }
.ht-account-main .woocommerce-MyAccount-content a { color:var(--ice); }
.ht-account-main .woocommerce-MyAccount-content h2, .ht-account-main .woocommerce-MyAccount-content h3 { color:#fff; text-transform:uppercase; letter-spacing:.5px; }
.ht-account-main .woocommerce-MyAccount-content > p:first-child { margin-top:0; }
.ht-account-main table.shop_table, .ht-account-main table.woocommerce-orders-table, .ht-account-main table.woocommerce-table { width:100%; border-collapse:collapse; margin:8px 0 18px; }
.ht-account-main table th, .ht-account-main table td { border:1px solid var(--border); padding:10px 12px; color:var(--text-2); text-align:left; }
.ht-account-main table th { color:#fff; text-transform:uppercase; font-size:.7rem; letter-spacing:.5px; }
.ht-account-main label { display:block; color:var(--text-2); font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; margin:0 0 6px; }
.ht-account-main input:not([type=checkbox]):not([type=radio]), .ht-account-main select, .ht-account-main textarea { width:100%; max-width:420px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-btn); color:#fff; padding:11px 13px; font-family:"Montserrat",sans-serif; margin-bottom:14px; }
.ht-account-main input:focus, .ht-account-main select:focus, .ht-account-main textarea:focus { outline:none; border-color:var(--ice); box-shadow:0 0 0 3px rgba(98,200,244,.3); }
.ht-account-main .button, .ht-account-main .woocommerce-Button, .ht-account-main button[type=submit] { display:inline-block; background:var(--ice); color:var(--ink); border:1px solid var(--ice); border-radius:var(--radius-btn); padding:13px 22px; font-family:"Montserrat",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.6px; font-size:.78rem; cursor:pointer; text-decoration:none; }
.ht-account-main .button:hover, .ht-account-main .woocommerce-Button:hover, .ht-account-main button[type=submit]:hover { background:var(--ice-hover); }
.ht-account-main .woocommerce-message, .ht-account-main .woocommerce-info, .ht-account-main .woocommerce-error, .ht-account-main .woocommerce-notice { position:relative; background:var(--rink); border:1px solid var(--border); border-left:3px solid var(--ice); color:var(--text-2); padding:14px 18px; border-radius:var(--radius-btn); list-style:none; margin-bottom:16px; }
/* Drop WooCommerce's absolutely-positioned status icon (the red/grey dot that overlapped the text) */
.ht-account-main .woocommerce-message::before, .ht-account-main .woocommerce-info::before, .ht-account-main .woocommerce-error::before, .ht-account-main .woocommerce-notice::before { content:none; display:none; }
.ht-account-main .woocommerce-error { border-left-color:#f87171; }
.ht-account-main mark { background:transparent; color:var(--ice); }
/* Teams "Family" members area — keep it full width and readable (no narrow column) */
.ht-account-main [class*="members-area"], .ht-account-main [class*="team"], .ht-account-main .wc-memberships-for-teams-my-account { width:100%; max-width:none; float:none; }
.ht-account-main .woocommerce-MyAccount-content table { display:table; }
.ht-account-main #role_field { display:none !important; }
/* Admin platform overview — families nav count + panel headings */
.ht-account-main .ht-fam-count { opacity:.55; font-weight:400; }
.ht-account-main .ht-admin-fam-panel h2 { margin-top:0; }
/* Team member row actions (Remove, etc.) — dark to match the rest, not WC's light button */
.ht-account-main td.team-actions { background:transparent; }
.ht-account-main td.team-actions a.button,
.ht-account-main a.wc-memberships-for-teams-team-area-action {
	display:inline-block; margin:0 0 6px; padding:8px 14px;
	background:var(--bg); color:var(--text-2);
	border:1px solid var(--border); border-radius:var(--radius-btn);
	text-transform:uppercase; letter-spacing:.5px; font-size:.72rem; font-weight:700; text-decoration:none;
}
.ht-account-main td.team-actions a.button:hover,
.ht-account-main a.wc-memberships-for-teams-team-area-action:hover {
	background:var(--rink); border-color:var(--ice); color:#fff;
}
/* Members table: one line per cell. The account nav stacks above the content at
   <=1200px (below), which gives this card the full width so the table fits without
   overflowing. The actions column shrinks to the Remove button (no trailing space). */
.ht-account-main table.my_team_members { width:100%; table-layout:auto; }
.ht-account-main table.my_team_members th,
.ht-account-main table.my_team_members td { white-space:nowrap; padding:12px 12px; vertical-align:middle; }
.ht-account-main table.my_team_members td.team-actions { white-space:normal; width:1%; }
/* Every cell shares the panel background (overrides WooCommerce's odd-row zebra
   stripe) so the whole table reads as one consistent surface. */
.ht-account-main table.my_team_members tbody tr td,
.ht-account-main table.my_team_members tbody tr th { background:var(--panel) !important; }

/* The teams tables (Members, Pending invitations) are wider than the card's
   default content box, so the card background used to stop before the Remove
   column and the rows spilled past its rounded right corner. Two things caused
   the shortfall: WooCommerce's clearfix ::before/::after on .woocommerce become
   flex items in our flex row, and the two extra gaps they bring took 48px off
   the card; and the card could shrink below the width of its own table. Dropping
   the phantom items and flooring the card at its content width gives the card
   the full table width. This does not change how far the page itself scrolls
   sideways, which the nowrap table sets on its own (HT-87). Scoped to the direct
   child so a nested .woocommerce keeps its clearfix.

   The floor only applies from 1300px up, which is where the desktop row has room
   for it: about 230px of left rail, 32px of wrapper padding, the 200px nav, one
   24px gap, the 777px card and 32px of padding on the right comes to roughly
   1295px. Below that the card cannot grow without leaving the screen, so the
   email column gives way instead. It is the only cell with unbounded length, and
   letting it wrap pulls the table back inside the card, which keeps the whole
   panel on screen at every width (HT-87). my_account_teams also covers the teams
   list, Team Settings and learner progress tables; none of those set nowrap, so
   their min-content is small and the floor costs them nothing. */
.ht-account-main > .woocommerce::before,
.ht-account-main > .woocommerce::after { display:none; }
@media (min-width:1300px){
	.ht-account-main .woocommerce-MyAccount-content:has(table.my_account_teams) { min-width:min-content; }
}
@media (max-width:1299px){
	.ht-account-main table.my_team_members th.member-email,
	.ht-account-main table.my_team_members td.member-email { white-space:normal; overflow-wrap:anywhere; }
}
/* Mobile: WooCommerce stacks each row into a card. Our desktop width:1% on the
   actions cell would leave it ~26px wide and clip the Remove button, so widen it
   and make Remove a full-width, tappable button. */
@media (max-width:768px){
	.ht-account-main table.my_team_members td.team-actions { width:auto; text-align:left; }
	.ht-account-main table.my_team_members td.team-actions a { display:block; width:100%; box-sizing:border-box; text-align:center; margin:0; }
}
/* "Members (N) | Pending invitations (N)" switcher: the plugin ships a <ul class="views">
   with a literal " |" text node that wraps to a dangling pipe, and it renders as bullets
   on the Family tab. Lay it out as clean inline tabs and mask the stray pipe (transparent
   li text; the anchors keep their own color). */
.ht-account-main .views { list-style:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; margin:0 0 16px; padding:0; }
.ht-account-main .views li { margin:0; padding:0; font-size:0; }
.ht-account-main .views li a { font-size:.95rem; text-decoration:none; }
.ht-account-main .views li a.current { color:#fff !important; font-weight:700; }
.ht-account-main .views li a:not(.current):hover { color:var(--ice-hover); }
/* "Buy more seats" card in the Add Member section */
.ht-buy-seats { margin:22px 0 0; padding:20px 22px; background:var(--rink); border:1px solid var(--border); border-left:3px solid var(--ice); border-radius:var(--radius); }
.ht-buy-seats h3 { margin:0 0 8px; color:#fff; text-transform:uppercase; letter-spacing:.5px; }
.ht-buy-seats p { color:var(--text-2); margin:0 0 12px; }
.ht-buy-seats #ht-buy-seats-field { max-width:120px; display:inline-block; margin:0 10px 0 0; }
.ht-buy-seats .ht-buy-seats-note { font-size:.78rem; color:var(--text-2); margin:12px 0 0; }

/* --- Kill remaining light backgrounds across the account sub-pages --- */
/* Secondary buttons (View order, Change/Cancel subscription, Add payment method, Make default):
   WC's a.button beats our .button rule, so theme them dark to match. Submit buttons stay ice. */
.ht-account-main a.button,
.ht-account-main button.button:not([type="submit"]),
.ht-account-main input.button:not([type="submit"]) {
	background:var(--bg); background-image:none; color:var(--text-2); text-shadow:none;
	border:1px solid var(--border); border-radius:var(--radius-btn);
	padding:11px 18px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:.74rem; text-decoration:none;
}
.ht-account-main a.button:hover,
.ht-account-main button.button:not([type="submit"]):hover,
.ht-account-main input.button:not([type="submit"]):hover {
	background:var(--rink); border-color:var(--ice); color:#fff;
}
/* select2 country/state dropdowns — the closed box (inside the form) */
.ht-account-main .select2-container--default .select2-selection--single,
.ht-account-main .select2-container--default .select2-selection--multiple {
	background:var(--bg); border:1px solid var(--border); color:#fff; min-height:44px; border-radius:var(--radius-btn);
}
.ht-account-main .select2-container--default .select2-selection--single .select2-selection__rendered { color:#fff; line-height:42px; padding:0 13px; }
.ht-account-main .select2-container--default .select2-selection--single .select2-selection__arrow { height:42px; }
.ht-account-main .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color:var(--text-2) transparent transparent; }
/* select2 popup + tiptip render at <body> level, not inside the form */
body.ht-app .select2-dropdown { background:var(--panel); border:1px solid var(--border); color:var(--text-2); }
body.ht-app .select2-container--default .select2-results__option { background:transparent; color:var(--text-2); }
body.ht-app .select2-container--default .select2-results__option--highlighted[aria-selected] { background:var(--ice); color:var(--ink); }
body.ht-app .select2-search--dropdown .select2-search__field { background:var(--bg); border:1px solid var(--border); color:#fff; }
body.ht-app #tiptip_holder #tiptip_content { background:var(--ink); color:#fff; border:1px solid var(--border); }
body.ht-app #tiptip_holder.tip_top #tiptip_arrow_inner { border-top-color:var(--ink); }
body.ht-app #tiptip_holder.tip_bottom #tiptip_arrow_inner { border-bottom-color:var(--ink); }
/* checkboxes / radios pick up the brand color instead of the white default */
.ht-account-main input[type="checkbox"], .ht-account-main input[type="radio"] { accent-color:var(--ice); }
/* Native <select> (e.g. Add Member "Position") — WC's .form-row select wins on specificity, so force dark */
.ht-account-main select,
.ht-account-main .form-row select,
.ht-account-main .woocommerce-input-wrapper select {
	background:var(--bg) !important; color:#fff !important; border:1px solid var(--border) !important; border-radius:var(--radius-btn) !important;
}
.ht-account-main select option { background:var(--bg); color:#fff; }

/* Stack the account nav above the content on laptops/tablets so the content card
   gets the full width (two side-by-side nav columns otherwise squeeze the table). */
@media (max-width:1200px){
	.ht-account-main .woocommerce { flex-direction:column; gap:16px; }
	.ht-account-main .woocommerce-MyAccount-navigation { flex:1 1 auto; width:100%; max-width:none; }
	.ht-account-main .woocommerce-MyAccount-navigation ul { flex-direction:row; flex-wrap:wrap; }
	.ht-account-main .woocommerce-MyAccount-navigation li { width:auto; }
}

/* Teams invitation / join-team page — branded card around WC register/login */
body.ht-join-page { display:flex; min-height:100vh; align-items:flex-start; justify-content:center; background:var(--rink); }
.ht-join-page .ht-login-wrap { width:100%; padding:48px 24px; display:flex; justify-content:center; }
.ht-join-card { width:100%; max-width:600px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:36px 34px; box-shadow:0 24px 70px rgba(0,0,0,.6); }
.ht-join-card .ht-logo { display:block; text-align:center; margin-bottom:14px; }
.ht-join-card .ht-logo img { height:92px; width:auto; display:inline-block; }
.ht-join-card .woocommerce { display:block; }
.ht-join-card h1, .ht-join-card .entry-title { font-family:"Archivo Black",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.5px; color:#fff; font-size:1.5rem; text-align:center; margin:0 0 6px; }
.ht-join-card h2 { font-family:"Archivo Black",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.5px; color:#fff; font-size:1.05rem; margin:22px 0 12px; }
.ht-join-card .col2-set, .ht-join-card .u-columns { display:block; }
.ht-join-card .col-1, .ht-join-card .col-2 { width:100% !important; float:none !important; margin:0 0 8px; }
.ht-join-card p, .ht-join-card label { color:var(--text-2); }
.ht-join-card label { display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.5px; margin:0 0 6px; }
.ht-join-card input:not([type=checkbox]):not([type=radio]) { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-btn); color:#fff; padding:12px 14px; font-family:"Montserrat",sans-serif; margin-bottom:14px; }
.ht-join-card input:focus { outline:none; border-color:var(--ice); box-shadow:0 0 0 3px rgba(98,200,244,.3); }
.ht-join-card .button, .ht-join-card .woocommerce-Button, .ht-join-card button[type=submit] { width:100%; display:block; background:var(--ice); color:var(--ink); border:1px solid var(--ice); border-radius:var(--radius-btn); padding:14px 22px; font-family:"Montserrat",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.6px; font-size:.8rem; cursor:pointer; text-align:center; margin-top:4px; }
.ht-join-card .button:hover, .ht-join-card .woocommerce-Button:hover, .ht-join-card button[type=submit]:hover { background:var(--ice-hover); }
.ht-join-card a { color:var(--ice); }
.ht-join-card .woocommerce-message, .ht-join-card .woocommerce-info, .ht-join-card .woocommerce-error { position:relative; background:var(--rink); border:1px solid var(--border); border-left:3px solid var(--ice); color:var(--text-2); padding:14px 18px; border-radius:var(--radius-btn); list-style:none; margin-bottom:16px; }
.ht-join-card .woocommerce-message::before, .ht-join-card .woocommerce-info::before, .ht-join-card .woocommerce-error::before { content:none; display:none; }
.ht-join-card .woocommerce-error { border-left-color:#f87171; }
.ht-join-card .woocommerce-form-login__rememberme, .ht-join-card .woocommerce-form__label-for-checkbox { text-transform:none; font-size:.8rem; }

/* Checkout — branded shell + WooCommerce Checkout block skin */
body.ht-checkout-page { background:var(--bg); }
.ht-checkout-main { width:100%; max-width:1180px; margin:0 auto; padding:24px 32px 60px; }
.ht-checkout-page .ht-shell { width:100%; }
/* Wizard-style step bar on checkout (4 = Payment), to match the registration wizard */
/* Stepper matches the coded wizard's horizontal underline style (continuation into Payment). */
.ht-checkout-page .ht-steps { display:flex; gap:6px; max-width:820px; margin:4px auto 30px; padding:0; }
.ht-checkout-page .ht-step { flex:1 1 0; text-align:left; padding-bottom:8px; border-bottom:2px solid var(--border); }
.ht-checkout-page .ht-step-label { color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
.ht-checkout-page .ht-step.is-active { border-bottom-color:var(--ice); }
.ht-checkout-page .ht-step.is-active .ht-step-label { color:var(--ice); }
.ht-checkout-page .ht-step.is-done { border-bottom-color:var(--ice); }
.ht-checkout-page .ht-step.is-done .ht-step-label { color:var(--text-2); }
@media (max-width:560px){ .ht-checkout-page .ht-step-label { font-size:.58rem; } }
.ht-checkout-page .wc-block-checkout, .ht-checkout-page .wp-block-woocommerce-checkout, .ht-cart-page .wc-block-cart, .ht-cart-page .wp-block-woocommerce-cart { width:100% !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; }
/* Let WooCommerce's native sidebar layout keep the order summary on the RIGHT (don't override its flex/grid). */
.ht-checkout-page .wc-block-components-order-summary-item__description, .ht-checkout-page .wc-block-components-product-name { line-height:1.35; }
/* Keep the WC cart/checkout blocks inside our centered container.
   The blocks ship with `alignwide`, which breaks out with negative margins and clips
   the right edge in our shell — neutralize it, and stack cleanly on mobile. */
body.ht-checkout-page, body.ht-cart-page { overflow-x:hidden; }
.ht-checkout-main .alignwide, .ht-checkout-main .alignfull,
.ht-checkout-main .wp-block-woocommerce-cart, .ht-checkout-main .wp-block-woocommerce-checkout {
	width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important;
}
.ht-checkout-main .wc-block-components-sidebar-layout,
.ht-checkout-main .wc-block-components-sidebar, .ht-checkout-main .wc-block-cart__sidebar,
.ht-checkout-main .wc-block-components-main, .ht-checkout-main .wc-block-cart__main,
.ht-checkout-main .wc-block-cart-totals, .ht-checkout-main .wc-block-components-order-summary {
	box-sizing:border-box !important; max-width:100% !important;
}
@media (max-width:781px){
	.ht-checkout-main .wc-block-components-sidebar-layout { display:block !important; }
	.ht-checkout-main .wc-block-components-main, .ht-checkout-main .wc-block-cart__main,
	.ht-checkout-main .wc-block-components-sidebar, .ht-checkout-main .wc-block-cart__sidebar {
		width:100% !important; float:none !important; margin:0 0 16px !important;
	}
}
.ht-checkout-page .ht-section-title { margin:8px 0 20px; }
/* layout: keep the block's own 2-col grid; just theme the surfaces */
.ht-checkout-page .wc-block-checkout, .ht-checkout-page .wp-block-woocommerce-checkout { color:var(--text); }
.ht-checkout-page .wc-block-components-checkout-step, .ht-checkout-page .wp-block-woocommerce-checkout-fields-block > div { background:transparent; }
.ht-checkout-page .wc-block-components-checkout-step { border-bottom:1px solid var(--border); padding-bottom:18px; margin-bottom:18px; }
.ht-checkout-page .wc-block-components-checkout-step__title, .ht-checkout-page .wc-block-components-title, .ht-checkout-page .wc-block-components-checkout-step__heading-content { color:#fff; }
.ht-checkout-page .wc-block-components-checkout-step__title { font-family:"Archivo Black",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.5px; }
.ht-checkout-page label, .ht-checkout-page .wc-block-components-checkout-step__description, .ht-checkout-page .wc-block-components-text-input label { color:var(--text-2); }
/* inputs */
.ht-checkout-page .wc-block-components-text-input input, .ht-checkout-page input.wc-block-components-text-input, .ht-checkout-page .wc-block-components-select__container, .ht-checkout-page select, .ht-checkout-page textarea, .ht-checkout-page .wc-block-components-combobox-control input { background:var(--bg) !important; border:1px solid var(--border) !important; color:#fff !important; border-radius:var(--radius-btn) !important; }
.ht-checkout-page .wc-block-components-text-input input:focus, .ht-checkout-page select:focus { border-color:var(--ice) !important; box-shadow:0 0 0 2px rgba(98,200,244,.3) !important; outline:none !important; }
.ht-checkout-page .wc-block-components-text-input.is-active label, .ht-checkout-page .wc-block-components-text-input label { color:var(--muted) !important; }
/* order summary / totals sidebar */
.ht-checkout-page .wc-block-components-sidebar, .ht-checkout-page .wc-block-checkout__sidebar, .ht-checkout-page .wc-block-components-order-summary { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); }
.ht-checkout-page .wc-block-components-totals-item, .ht-checkout-page .wc-block-components-order-summary-item, .ht-checkout-page .wc-block-components-totals-footer-item, .ht-checkout-page .wc-block-components-product-metadata { color:var(--text-2); }
.ht-checkout-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color:#fff; }
/* payment method radios + tilled card area */
.ht-checkout-page .wc-block-components-radio-control__option, .ht-checkout-page .wp-block-woocommerce-checkout-payment-block { color:var(--text-2); }
/* place order button */
.ht-checkout-page .wc-block-components-checkout-place-order-button, .ht-checkout-page .wc-block-components-button.contained, .ht-checkout-page button.wc-block-components-checkout-place-order-button { background:var(--ice) !important; color:var(--ink) !important; border:1px solid var(--ice) !important; border-radius:var(--radius-btn) !important; font-family:"Montserrat",sans-serif !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.6px !important; box-shadow:none !important; }
.ht-checkout-page .wc-block-components-checkout-place-order-button:hover { background:var(--ice-hover) !important; }
.ht-checkout-page a { color:var(--ice); }
.ht-checkout-page .wc-block-components-notice-banner { border-radius:var(--radius-btn); }
/* Tilled card fields: the digits render dark inside a cross-origin iframe (gateway-controlled), so
   the field must stay light. Style the container we CAN reach to match the theme's input shape +
   ice focus, so the light fields read as intentional rather than plain white boxes. */
body.ht-app .tilled-field-container { height:46px !important; border:1px solid var(--card-border) !important; border-radius:var(--radius-btn) !important; background-color:#fff !important; transition:border-color .15s, box-shadow .15s !important; }
body.ht-app .tilled-field-container:hover { border-color:var(--ice) !important; }
body.ht-app .tilled-field-container:focus-within { border-color:var(--ice) !important; box-shadow:0 0 0 2px rgba(98,200,244,.35) !important; }
body.ht-app .tilled-field-container.tilled-field-invalid { border-color:#f87171 !important; }
body.ht-app .tilled-field-error { color:#f87171; }
@media (max-width:680px){ .ht-checkout-main { padding:16px 16px 48px; } }

/* Add payment method page (My Account -> Payment methods -> Add). WooCommerce's classic payment box
   renders on a light #dfdcde panel with a purple .alt button and red required marks. Dark-theme the
   box, button, and marks to match the app; the Tilled card fields stay white (see the note above). */
.ht-account-main ul.payment_methods { margin:0 0 18px; padding:0; border:0; background:transparent; list-style:none; }
.ht-account-main ul.payment_methods li { background:transparent; }
.ht-account-main ul.payment_methods > li > label { color:#fff; text-transform:uppercase; letter-spacing:.5px; font-weight:700; font-size:.78rem; }
.ht-account-main div.payment_box,
.ht-account-main .woocommerce-PaymentBox { background:var(--bg) !important; border:1px solid var(--border) !important; border-radius:var(--radius-btn) !important; color:var(--text-2) !important; margin-top:12px; }
.ht-account-main div.payment_box::before { border:1em solid var(--bg) !important; border-right-color:transparent !important; border-left-color:transparent !important; border-top-color:transparent !important; }
.ht-account-main div.payment_box p { color:var(--text-2); }
.ht-account-main div.payment_box label { color:var(--text-2); text-transform:none; letter-spacing:0; font-weight:600; }
.ht-account-main .required, .ht-account-main abbr.required, .ht-account-main span.required { color:var(--ice) !important; border:0; text-decoration:none; }
.ht-account-main ul.payment_methods input.input-radio, .ht-account-main ul.payment_methods input[type=radio] { accent-color:var(--ice); }
/* "Add payment method" submit: WC .button.alt paints it purple (#a46497); force ice like other submits. */
.ht-account-main #add_payment_method button.button.alt,
.ht-account-main #add_payment_method input.button.alt,
.ht-account-main button#place_order,
.ht-account-main button.button.alt { background:var(--ice) !important; color:var(--ink) !important; border:1px solid var(--ice) !important; text-shadow:none !important; box-shadow:none !important; }
.ht-account-main #add_payment_method button.button.alt:hover,
.ht-account-main button#place_order:hover,
.ht-account-main button.button.alt:hover { background:var(--ice-hover) !important; }
/* Card fields on this page use Tilled's classic script, which honors field_styles (fed light digit
   text in ht-app.php), so darken the container to match. Overrides the global white-field rule; the
   Blocks checkout keeps its white fields (its in-iframe text is dark and has no override seam). */
body.ht-app.ht-account-page .tilled-field-container { background-color:var(--bg) !important; border-color:var(--border) !important; }

/* Cart block */
.ht-cart-page .wc-block-cart, .ht-cart-page .wp-block-woocommerce-cart { color:var(--text); }
.ht-cart-page table, .ht-cart-page .wc-block-cart-items { color:var(--text-2); background:transparent; }
.ht-cart-page .wc-block-cart-items__header, .ht-cart-page th { color:#fff; border-color:var(--border) !important; text-transform:uppercase; font-size:.72rem; letter-spacing:.5px; }
.ht-cart-page td, .ht-cart-page .wc-block-cart-items__row { border-color:var(--border) !important; }
.ht-cart-page .wc-block-components-product-name, .ht-cart-page .wc-block-cart-item__total, .ht-cart-page .wc-block-components-product-price { color:#fff !important; }
.ht-cart-page .wc-block-cart__sidebar .wc-block-components-sidebar, .ht-cart-page .wc-block-cart-totals { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); }
.ht-cart-page .wc-block-components-totals-item, .ht-cart-page .wc-block-components-totals-footer-item { color:var(--text-2); }
.ht-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color:#fff; }
.ht-cart-page .wc-block-cart__submit-button, .ht-cart-page .wc-block-cart__submit-container a, .ht-cart-page .wc-block-components-button.contained { background:var(--ice) !important; color:var(--ink) !important; border:1px solid var(--ice) !important; border-radius:var(--radius-btn) !important; font-family:"Montserrat",sans-serif !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.6px !important; box-shadow:none !important; }
.ht-cart-page input, .ht-cart-page .wc-block-components-text-input input { background:var(--bg) !important; border:1px solid var(--border) !important; color:#fff !important; border-radius:var(--radius-btn) !important; }
.ht-cart-page a { color:var(--ice); }

/* Order received / thank-you (rendered in the checkout shell) */
.ht-checkout-page .woocommerce-order, .ht-checkout-page .wc-block-order-confirmation { color:var(--text-2); }
.ht-checkout-page .woocommerce-thankyou-order-received, .ht-checkout-page .wc-block-order-confirmation-status-description, .ht-checkout-page .wc-block-order-confirmation__status { color:#fff; font-family:"Archivo Black",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.5px; }
.ht-checkout-page .woocommerce-order-overview, .ht-checkout-page .woocommerce-table, .ht-checkout-page .woocommerce-column__title, .ht-checkout-page .wc-block-order-confirmation-summary, .ht-checkout-page .wc-block-order-confirmation-totals, .ht-checkout-page .wc-block-order-confirmation-shipping-address, .ht-checkout-page .wc-block-order-confirmation-billing-address { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; }
.ht-checkout-page .woocommerce-order-overview li, .ht-checkout-page .woocommerce-order strong { color:#fff; }
.ht-checkout-page .woocommerce-order-overview li, .ht-checkout-page .woocommerce-table th, .ht-checkout-page .woocommerce-table td { border-color:var(--border) !important; }
/* Hide the order-overview bar (order #, date, email, total, payment method) on the confirmation.
   Covers both the classic list and the Blocks summary equivalent. */
.ht-checkout-page .woocommerce-order-overview, .ht-checkout-page .wc-block-order-confirmation-summary { display:none !important; }