/* Adify TV V0.2 – Surf catalog and customer workspace, mobile first. */
.catalog-page,.customer-page,.watch-page{background:radial-gradient(ellipse at 85% 5%,#16405b66,transparent 42%),radial-gradient(ellipse at 10% 65%,#0c414b44,transparent 48%),#05111e;color:#eaf8ff}
.catalog-page .shell,.customer-page .shell{max-width:1400px}
.advertiser-hero{padding:clamp(32px,6vw,68px) 0 25px;max-width:980px}
.advertiser-hero h1{font-size:clamp(34px,5.6vw,62px);line-height:1.1;margin:12px 0 14px;letter-spacing:-.05em}
.advertiser-hero .lead{font-size:clamp(15px,1.7vw,19px);line-height:1.75;margin:0;color:#bbd5e7}
.hero-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:22px}
.catalog{padding:13px 0 50px}
.catalog .section-head{align-items:center}
.catalog .hint{max-width:1000px;margin:12px 0 25px}
.ad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,245px),1fr));gap:17px;align-items:stretch}
.ad-tile{border:1px solid #33647b;border-radius:18px;overflow:hidden;background:linear-gradient(150deg,#0e273b,#081b2b);box-shadow:0 10px 35px #0004;min-width:0;display:flex;flex-direction:column;transition:transform .18s,border-color .18s}
.ad-tile:hover{transform:translateY(-3px);border-color:#67daca}
.ad-tile[hidden]{display:none}
.ad-cover{position:relative;min-height:170px;aspect-ratio:16/10;background:radial-gradient(circle at 30% 35%,#1b6c7e90,transparent 46%),linear-gradient(125deg,#113c52,#121d3f);display:flex;justify-content:center;align-items:center;overflow:hidden}
.ad-tile:nth-child(2) .ad-cover{background:radial-gradient(circle at 30% 35%,#185e927a,transparent 46%),linear-gradient(125deg,#113b51,#0e2148)}
.ad-tile:nth-child(3) .ad-cover{background:radial-gradient(circle at 30% 35%,#298b6b88,transparent 46%),linear-gradient(125deg,#06493c,#101d3f)}
.ad-tile:nth-child(4) .ad-cover{background:radial-gradient(circle at 30% 35%,#1c479b88,transparent 46%),linear-gradient(125deg,#172e55,#192038)}
.ad-tile:nth-child(5) .ad-cover{background:radial-gradient(circle at 30% 35%,#85468388,transparent 46%),linear-gradient(125deg,#503059,#1c1637)}
.ad-cover img{width:min(48%,150px);height:125px;object-fit:contain;filter:drop-shadow(0 9px 24px #0008)}
.tile-duration{position:absolute;top:12px;right:12px;border-radius:9px;padding:5px 10px;font-size:12px;font-weight:800;background:#081725db;border:1px solid #7da7b4;color:#ebffff}
.ad-tile-content{padding:17px;display:flex;flex-direction:column;flex:1;min-width:0}
.ad-tile-content h3{font-size:18px;line-height:1.24;margin:0 0 10px;overflow-wrap:anywhere}
.ad-tile-content p{color:#bdd5e1;font-size:13px;line-height:1.55;min-height:64px;margin:0 0 15px}
.tile-bottom{border-top:1px solid #34546c;padding:14px 0 0;display:grid;gap:10px;margin-top:auto}
.tile-reward{display:flex;flex-direction:column;gap:1px}
.tile-reward small{color:#9ebfce;font-size:11px}.tile-reward strong{color:#81f9af;font-size:25px;font-weight:900;letter-spacing:-.025em}
.primary-link,.customer-page button.primary-link,.watch-page .primary-link{display:flex;justify-content:center;align-items:center;min-height:46px;padding:10px 16px;text-decoration:none;border-radius:11px;background:linear-gradient(100deg,#54e5df,#8bfdc4);border:1px solid #a5ffdb;color:#082335;font-weight:880;font-size:13px;text-align:center;line-height:1.35}
.primary-link:hover{filter:brightness(1.1)}
.tile-tools{display:flex;gap:16px;justify-content:space-between;margin-top:12px}
.text-button{min-height:38px;border:0;background:transparent;color:#9bc3d7;text-decoration:underline;font-weight:720;font-size:12px;padding:6px;cursor:pointer}
.support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin:0 0 35px}
.support-grid .panel{display:flex;flex-direction:column;align-items:flex-start}.support-grid .panel .primary-link{margin-top:auto}
.plan-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}.plan-badges span{border:1px solid #3b6a78;border-radius:10px;padding:8px 10px;font-size:11px;font-weight:800;color:#9bf2cf}
.legal-note{color:#d7cb9b;background:#312f1a7c;border:1px solid #6b6033;border-radius:12px;padding:13px 18px;font-size:13px;margin:0 0 36px;max-width:1050px}
.customer-head{padding:32px 0 18px}.customer-head h1{font-size:clamp(30px,5vw,48px);margin:6px 0 10px}.customer-workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.9fr);gap:18px;padding:10px 0 40px;align-items:start}
.customer-page .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.customer-page .field{min-width:0;display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.customer-page .field.full{grid-column:1/-1}.customer-page label{color:#d9ebf2;font-size:13px;font-weight:760}
.customer-page input,.customer-page textarea,.customer-page select{width:100%;min-width:0;min-height:44px;background:#092133;border:1px solid #51768b;color:#ecfaff;border-radius:10px;padding:10px 12px;font:inherit;font-size:14px}
.customer-page textarea{min-height:86px;resize:vertical}.customer-page input:focus,.customer-page textarea:focus,.customer-page select:focus{outline:2px solid #7df2d4;outline-offset:2px}
.customer-page .field-hint{font-size:11px;color:#91b3c6}
.customer-page .form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.customer-page button{cursor:pointer;border-radius:11px;min-height:45px;padding:10px 16px;background:#15384a;color:#ebffff;border:1px solid #4e8090;font-weight:800}
.customer-page button:disabled{opacity:.5;cursor:not-allowed}
.customer-page button.primary{background:linear-gradient(100deg,#7aeed4,#beff99);border-color:#aaffde;color:#0b2734}
.customer-preview{border:1px solid #3a7288;border-radius:16px;overflow:hidden;background:#0d293d}
.customer-preview .ad-cover{min-height:200px}
.customer-preview .ad-tile-content{padding:18px}
.customer-preview img{max-width:60%;object-fit:contain;max-height:140px}
.customer-page .notice{background:#2f2c1d;border:1px solid #6b6037;color:#ffe7ac;border-radius:12px;padding:12px 15px;font-size:12px;margin-bottom:18px}
.customer-page .my-drafts{margin:18px 0 28px}.customer-page .draft-list{display:grid;gap:11px}
.customer-page .draft{border:1px solid #355c70;border-radius:12px;background:#092337;padding:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.customer-page .draft strong{display:block;font-size:14px}.customer-page .draft small{display:block;color:#a9c5d4;font-size:11px}.customer-page .draft button{min-height:40px}
.watch-page .watch-layout{width:min(100%,1500px);margin:auto;min-height:100vh;padding:0 12px 20px;display:flex;flex-direction:column}
.watch-page .watch-top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px 12px;background:#061826ed;backdrop-filter:blur(16px);border-bottom:1px solid #326177}
.watch-page .watch-top .brand img{width:44px;height:44px}
.watch-page .watch-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1;justify-content:flex-end}
.watch-page .watch-status strong{color:#8ff5c2;font-variant-numeric:tabular-nums;font-size:21px}
.watch-page .frame-progress{width:100%;height:9px;background:#163648;border-radius:999px;overflow:hidden;border:1px solid #33738a}
.watch-page .frame-progress div{height:100%;width:0;background:linear-gradient(90deg,#5de5f8,#8cffc0)}
.watch-page .ad-frame-wrap{flex:1;min-height:calc(100vh - 176px);margin:12px 0 0;border:1px solid #35677f;border-radius:14px;position:relative;overflow:hidden;background:#0b2334}
.watch-page iframe{width:100%;height:100%;min-height:70vh;border:0;background:#fff}
.watch-page .frame-help{position:absolute;bottom:13px;left:13px;right:13px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#081e31ed;color:#e2f4f9;border:1px solid #3e7086;padding:10px 15px;border-radius:11px;font-size:12px}
.watch-page .frame-help a{color:#9df2e2;font-weight:850}
.watch-page .watch-footer{color:#adccda;font-size:12px;padding:8px 4px}.watch-page .watch-footer p{margin:4px}
@media(max-width:900px){.customer-workspace{grid-template-columns:1fr}.support-grid{grid-template-columns:1fr}}
@media(max-width:600px){.ad-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}.ad-tile-content p{min-height:0}.customer-page .form-grid{grid-template-columns:1fr}.watch-page .watch-top{justify-content:center}.watch-page .watch-status{justify-content:space-between;width:100%}}
@media(max-width:390px){.ad-grid{grid-template-columns:1fr}.catalog-page .shell{padding:0 13px}.tile-bottom{gap:6px}.watch-page .ad-frame-wrap{min-height:75vh}.watch-page .frame-help{position:static;border-radius:0}}

/* V0.3: prepaid normal credits and non-pausable premium rentals. */
#demoCredits{margin:12px 0 25px}
.package-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.customer-page .package-choice{border:1px solid #3d9b9c;background:linear-gradient(135deg,#143f51,#102638);padding:18px 14px;border-radius:14px;min-height:125px;text-align:left;display:flex;flex-direction:column;gap:7px}
.package-choice strong{font-size:17px}.package-choice span{font-size:14px;color:#c5e2ea}.package-choice b{color:#88ffba;font-size:15px}
.package-choice:hover{border-color:#aaffcd;background:#1b5161}
.credit-balance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:15px 0}
.credit-stat{border:1px solid #31546c;border-radius:13px;padding:13px;background:#0b2c3d;display:flex;flex-direction:column;gap:4px}
.credit-stat small{color:#a1cbdc;font-weight:750}.credit-stat strong{font-size:20px;color:#96ffbb}.credit-stat span{font-size:12px;color:#d2e5ee}
.customer-page .draft-info{flex:1;min-width:180px}
.customer-page .draft-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.customer-page .draft-actions button{font-size:12px;min-height:39px;padding:8px 10px}
.customer-page .draft-actions .inline-credit{max-width:92px;min-width:70px;min-height:39px}
.customer-page .draft-actions .secondary-link{font-size:12px;min-height:39px;padding:8px 10px}
#premiumList{margin-top:13px}
@media(max-width:700px){.package-cards{grid-template-columns:1fr}.credit-balance{grid-template-columns:1fr}.customer-page .draft{align-items:flex-start}}


/* V0.4 – booking must show the corresponding credit balance at the input. */
.customer-page .package-disclosure{border:1px solid #315e72;border-radius:14px;padding:0 14px;margin:15px 0;background:#0a2a3b}
.customer-page .package-disclosure summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:47px;padding:10px 3px;color:#d9f8ef;font-weight:780;font-size:14px}
.customer-page .package-disclosure summary::after{content:"+";font-size:21px;color:#92f8bd}
.customer-page .package-disclosure[open] summary::after{content:"−"}
.customer-page .package-disclosure summary::-webkit-details-marker{display:none}
.customer-page .package-disclosure summary:focus-visible{outline:2px solid #92f8bd;outline-offset:2px}
.customer-page .package-disclosure .package-cards{margin:8px 0 13px}
.customer-page .package-disclosure .hint{margin:0 0 13px}
.customer-page #demoCredits{margin-bottom:14px}
.customer-page .booking-balance-banner{background:linear-gradient(100deg,#123f50,#0d303b);border:1px solid #4f9a96;border-radius:12px;padding:11px 15px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:7px;margin:14px 0;color:#d8edef;font-size:12px}
.customer-page .booking-balance-banner strong{font-size:16px;color:#86ffc0;font-variant-numeric:tabular-nums}
.customer-page .booking-balance-banner.insufficient{border-color:#b5864c}
.customer-page .allocation-field .allocation-balance{background:linear-gradient(130deg,#143e44,#112c3e);border:1px solid #559f90;border-radius:12px;padding:9px 11px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;margin-bottom:9px}
.customer-page .allocation-balance-caption{color:#c6e4e4;font-size:12px}
.customer-page .allocation-balance strong{font-size:15px;color:#93ffc4;font-variant-numeric:tabular-nums}
.customer-page .allocation-balance-caption strong{font-size:12px;color:#ecfffc}
.customer-page .allocation-balance a{grid-column:1/-1;justify-self:start;font-size:12px;color:#93eaf3;font-weight:740}
.customer-page .allocation-forecast{font-size:12px;font-weight:800;line-height:1.5;color:#96ffc2;background:#10382f;border:1px solid #347f5e;border-radius:9px;padding:8px 10px;margin-top:9px}
.customer-page .allocation-field.insufficient .allocation-forecast{color:#ffcf87;background:#3a2d1b;border-color:#98723e}
.customer-page .allocation-field.insufficient .allocation-balance{border-color:#bc894e}
.customer-page #saveDraft:disabled{opacity:.48;cursor:not-allowed}
@media(max-width:650px){
 .customer-page .allocation-field .allocation-balance{grid-template-columns:1fr}
 .customer-page .booking-balance-banner{align-items:flex-start;flex-direction:column}
 .customer-page .package-disclosure{padding:0 10px}
}