/* homepage-v4 - design taken from homepage_v4.html.
   Every rule is scoped under .hp4 so the design tokens and the shared class
   names ( container, hero, section, lead, flag, open ) cannot collide with
   the about theme that provides the header and the footer of this page.
   The header / nav / footer rules of the original file are dropped, that
   chrome comes from header-about.php and footer-about.php. */

.hp4{--primary:#20BFEF; --primary-dark:#0E9CCB; --accent:#FF6B35; --accent-yellow:#FFC93C; --bg:#F7FAFC; --surface:#FFFFFF; --text:#1A202C; --muted:#5A6675; --border:#E2E8F0; --success:#10B981; --radius:14px; --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow:0 4px 16px rgba(15,30,60,.08); --shadow-lg:0 12px 32px rgba(15,30,60,.12); --max:1200px;}
.hp4 *,.hp4 *::before,.hp4 *::after{box-sizing:border-box}
.hp4{margin:0;font-family:'Tajawal',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;font-size:16px}
.hp4 img{max-width:100%;height:auto;display:block}
.hp4 a{color:var(--primary-dark);text-decoration:none}
.hp4 a:hover{text-decoration:underline}
.hp4 button{font-family:inherit;cursor:pointer;border:none;background:none}
.hp4 :focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}
.hp4 .container{max-width:var(--max);margin:0 auto;padding:0 16px}
@media (max-width:920px){}
/* the background of the hero is the one of the about page ( /aboutotlobcoupon-1 ):
   the diagonal gradient of .hero::before and the two blurred blobs .blob-1 and
   .blob-2 of assets/about/css/styles.css, same values. There the blobs are two
   divs at z-index:-1, here the markup does not change and a negative z-index
   would fall behind the background of .hp4, so they are the two pseudo elements
   of the hero and they sit under .hero-grid, which already carries z-index:1 */
.hp4 .hero{position:relative;overflow:hidden;padding:40px 0 56px;background:linear-gradient(to bottom left,rgba(32,191,239,.15),transparent 50%,rgba(255,217,40,.1))}
/* inset:auto cancels the inset:0 that .hero::before of the about sheet sets */
.hp4 .hero::before,.hp4 .hero::after{content:"";position:absolute;inset:auto;width:288px;height:288px;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
.hp4 .hero::before{top:-96px;left:-96px;background:rgba(32,191,239,.2)}
.hp4 .hero::after{bottom:-96px;right:-96px;background:rgba(255,217,40,.3)}
/* the page is rtl, the first column is the one on the right. The slider is put
   in it and the text in the second one, the widths follow them so each keeps
   the size it had. Only on the wide screen, on the mobile the single column
   keeps the order of the markup, the text first and the slider after */
.hp4 .hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:32px;align-items:center;position:relative;z-index:1}
@media (min-width:901px){
.hp4 .hero-grid > .offers-slider{order:1}
.hp4 .hero-grid > .hero-left{order:2}
}
@media (max-width:900px){.hp4 .hero-grid{grid-template-columns:1fr;gap:24px}}
.hp4 .hero-left{display:flex;flex-direction:column;gap:18px}
.hp4 .hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);color:var(--text);padding:7px 14px;border-radius:999px;font-weight:700;font-size:13px;box-shadow:var(--shadow-sm);width:max-content}
.hp4 .hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(16,185,129,.18);animation:pulseDot 1.8s infinite}
@keyframes pulseDot{50%{box-shadow:0 0 0 8px rgba(16,185,129,0)}}
.hp4 .hero h1{font-size:clamp(28px,4.2vw,46px);margin:0;line-height:1.2;font-weight:900;letter-spacing:-.01em}
.hp4 .hero h1 .accent{color:#20bfef;}
.hp4 .hero p.lead{font-size:clamp(15px,1.5vw,17px);color:var(--muted);margin:0;max-width:560px}
.hp4 .search-engine{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:14px;border:1px solid var(--border)}
.hp4 .search-tabs{display:flex;gap:6px;padding:4px;background:var(--bg);border-radius:12px;margin-bottom:10px}
.hp4 .search-tab{flex:1;padding:9px 12px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.15s;cursor:pointer;border:0;background:transparent}
.hp4 .search-tab[aria-selected="true"]{background:#fff;color:var(--primary-dark);box-shadow:var(--shadow-sm)}
.hp4 .search-tab:hover{color:var(--text)}
.hp4 .search-tab:focus-visible,.hp4 .slider-nav:focus-visible,.hp4 .slider-dot:focus-visible,.hp4 .slide-cta:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:10px}
.hp4 .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}
.hp4 .search-form{display:flex;gap:8px;align-items:stretch}
.hp4 .search-input-wrap{flex:1;position:relative;min-width:0}
.hp4 .search-input-wrap svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.hp4 .search-input-wrap input{width:100%;border:1.5px solid var(--border);border-radius:12px;padding:14px 44px 14px 14px;font:inherit;font-size:15px;background:var(--bg);transition:.15s}
.hp4 .search-input-wrap input:focus{outline:none;background:#fff;border-color:var(--primary);box-shadow:0 0 0 4px rgba(32,191,239,.15)}
.hp4 .search-form button{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:0 24px;border-radius:12px;font-weight:800;font-size:15px;min-height:52px;display:inline-flex;align-items:center;gap:8px;transition:.15s;box-shadow:0 6px 16px rgba(32,191,239,.35)}
.hp4 .search-form button:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(32,191,239,.45)}
.hp4 .popular-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;font-size:13px}
.hp4 .popular-row span{color:var(--muted);font-weight:600}
.hp4 .popular-row a{background:var(--bg);border:1px solid var(--border);padding:5px 11px;border-radius:999px;color:var(--text);font-weight:600;font-size:12.5px}
.hp4 .popular-row a:hover{border-color:var(--primary);color:var(--primary-dark);text-decoration:none}
.hp4 .trust-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.hp4 .trust-pill{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#047857;padding:6px 12px;border-radius:999px;font-weight:700;font-size:12.5px;border:1px solid #D1FAE5;box-shadow:var(--shadow-sm)}
.hp4 .trust-pill svg{flex-shrink:0}
.hp4 .offers-slider{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);background:#fff;aspect-ratio:4/3;max-height:460px}
.hp4 .slides{position:relative;width:100%;height:100%}
.hp4 .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;color:#fff}
.hp4 .slide::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.85) 100%);z-index:1}
.hp4 .slide.active{opacity:1;z-index:2}
.hp4 .slide > *{position:relative;z-index:2}
.hp4 .slide-1{background:linear-gradient(135deg,#FEE72E 0%,#FF6B35 100%)}
.hp4 .slide-2{background:linear-gradient(135deg,#20BFEF 0%,#0E4C81 100%)}
.hp4 .slide-3{background:linear-gradient(135deg,#FF3E7F 0%,#6C5CE7 100%)}
.hp4 .slide-4{background:linear-gradient(135deg,#10B981 0%,#065F46 100%)}
.hp4 .slide-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.22);backdrop-filter:blur(10px);padding:5px 12px;border-radius:999px;font-weight:800;font-size:12px;width:max-content;margin-bottom:10px;border:1px solid rgba(255,255,255,.3)}
.hp4 .slide-store{font-size:13px;font-weight:700;opacity:.92;margin:0 0 4px}
.hp4 .slide-title{font-size:clamp(20px,2.4vw,26px);font-weight:900;line-height:1.3;margin:0 0 6px;max-width:90%}
.hp4 .slide-desc{font-size:13.5px;opacity:.92;margin:0 0 14px;max-width:90%}
.hp4 .slide-cta{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text);padding:11px 20px;border-radius:12px;font-weight:800;font-size:14px;width:max-content;transition:.15s}
.hp4 .slide-cta:hover{transform:translateY(-1px);text-decoration:none;color:var(--primary-dark)}
.hp4 .slide-code{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.95);color:var(--text);padding:8px 14px;border-radius:10px;font-family:'Courier New',monospace;font-weight:900;font-size:14px;letter-spacing:1px;border:2px dashed var(--accent);z-index:3}
/* the arrows sit straight on the banner, no circle, no border, no shadow, they
   only turn white on hover. The size and the position do not change */
.hp4 .slider-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:none;border:0;border-radius:0;box-shadow:none;color:var(--text);display:grid;place-items:center;z-index:5;transition:.15s}
.hp4 .slider-nav:hover{background:none;color:#fff;transform:translateY(-50%) scale(1.08)}
.hp4 .slider-prev{right:12px}
.hp4 .slider-next{left:12px}
.hp4 .slider-dots{position:absolute;bottom:16px;right:50%;transform:translateX(50%);display:flex;gap:8px;z-index:5}
/* the card of the slider on a small screen. The fixed ratio held a box that the
   long titles of the coupons did not fit in, the text went out of the top of
   the card and the badge of the code covered it. Here the height follows the
   offer: the slides are stacked in one cell of a grid, so the card keeps the
   height of the tallest one, they still fade with the same classes and the
   script does not change. The badge and the dots get their own room and the
   arrows leave the middle of the card, the text lives there now. */
@media (max-width:900px){
.hp4 .offers-slider{aspect-ratio:auto;max-height:none;min-height:280px}
.hp4 .slides{display:grid;height:auto}
.hp4 .slide{position:relative;inset:auto;grid-area:1/1;padding:74px 20px 56px}
.hp4 .slide-title,.hp4 .slide-desc{max-width:100%}
.hp4 .slider-nav{top:auto;bottom:6px;transform:none}
.hp4 .slider-nav:hover{transform:scale(1.08)}
}
.hp4 .slider-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:.2s;cursor:pointer}
.hp4 .slider-dot.active{background:#fff;width:24px;border-radius:4px}
.hp4 main{padding:8px 0 48px}
 .section{     padding: 45px 16px; }
.hp4 .section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.hp4 .section-head h2{font-size:clamp(20px,2.4vw,26px);margin:0;display:flex;align-items:center;gap:10px}
.hp4 .section-head h2::before{content:"";width:5px;height:26px;background:var(--primary);border-radius:3px}
.hp4 .section-head .see-all{font-weight:700;color:var(--primary-dark);font-size:14px}
.hp4 .store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.hp4 .store-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;display:flex;flex-direction:column;gap:8px;transition:transform .15s,box-shadow .15s,border-color .15s;color:var(--text)}
.hp4 .store-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--primary);text-decoration:none}
.hp4 .store-logo{width:72px;height:72px;margin:0 auto;border-radius:14px;background:#F1F5F9;display:grid;place-items:center;font-weight:900;color:var(--primary-dark);font-size:20px;border:1px solid var(--border)}
.hp4 .store-card h3{margin:4px 0 0;font-size:16px;font-weight:800}
.hp4 .store-stats{font-size:13px;color:var(--muted)}
.hp4 .store-best{background:#FFF3E0;color:#B45309;font-weight:800;padding:4px 10px;border-radius:8px;font-size:12px;display:inline-block;margin:0 auto}
.hp4 .store-rating{font-size:13px;color:var(--muted);display:flex;justify-content:center;gap:4px;align-items:center}
.hp4 .store-rating .star{color:#F59E0B}
.hp4 .store-cta{margin-top:auto;background:var(--primary);color:#fff;padding:8px 14px;border-radius:8px;font-weight:700;font-size:14px;min-height:38px;display:inline-flex;align-items:center;justify-content:center}
.hp4 .store-card:hover .store-cta{background:var(--primary-dark)}
.hp4 .coupon-list{display:grid;gap:14px}
.hp4 .coupon-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s}
.hp4 .coupon-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.hp4 .coupon-card .c-logo{width:64px;height:64px;border-radius:12px;background:#F1F5F9;display:grid;place-items:center;font-weight:900;color:var(--primary-dark);font-size:16px;border:1px solid var(--border)}
.hp4 .coupon-body h3{font-size:17px;margin:0 0 6px;font-weight:700}
.hp4 .coupon-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--muted);align-items:center}
.hp4 .coupon-meta .verified{color:var(--success);font-weight:700;display:inline-flex;align-items:center;gap:4px}
.hp4 .discount-tag{background:var(--accent);color:#fff;font-weight:800;padding:3px 9px;border-radius:8px;font-size:12px}
.hp4 .coupon-actions{display:flex;align-items:stretch;border:2px dashed var(--primary);border-radius:12px;overflow:hidden;background:#fff;min-width:220px}
.hp4 .code-display{flex:1;display:flex;align-items:center;justify-content:center;font-family:monospace;font-weight:800;font-size:16px;letter-spacing:2px;color:var(--primary-dark);padding:0 12px;min-width:80px;background:repeating-linear-gradient(45deg,#F1F5F9,#F1F5F9 6px,#fff 6px,#fff 12px);user-select:all;position:relative}
.hp4 .code-display[data-masked="true"]{filter:blur(5px);cursor:pointer;user-select:none}
.hp4 .code-display[data-masked="true"]::after{content:"اضغط للكشف";position:absolute;inset:0;display:grid;place-items:center;filter:blur(0);color:var(--text);font-family:Tajawal,sans-serif;font-size:12px;letter-spacing:0;font-weight:600;background:rgba(255,255,255,.6)}
.hp4 .btn-reveal{background:var(--primary);color:#fff;font-weight:800;padding:12px 18px;min-height:52px;min-width:130px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px}
.hp4 .btn-reveal:hover,.hp4 .btn-reveal:focus-visible{background:var(--primary-dark)}
.hp4 .btn-reveal[data-copied="true"]{background:var(--success)}
.hp4 .coupon-actions.deal-only{border-style:solid;background:var(--primary)}
.hp4 .coupon-actions.deal-only .btn-reveal{width:100%}
@media (max-width:680px){.hp4 .coupon-card{grid-template-columns:48px 1fr;gap:12px;padding:14px}
.hp4 .coupon-card .c-logo{width:48px;height:48px;font-size:13px}
.hp4 .coupon-actions{grid-column:1/-1;min-width:0}}
.hp4 .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.hp4 .cat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 12px;text-align:center;color:var(--text);transition:transform .15s,border-color .15s}
.hp4 .cat-card:hover{transform:translateY(-3px);border-color:var(--primary);text-decoration:none}
.hp4 .cat-icon{width:56px;height:56px;margin:0 auto 10px;border-radius:14px;background:linear-gradient(135deg,#E6F8FE,#FFF5EC);display:grid;place-items:center;font-size:26px}
.hp4 .cat-card h3{font-size:15px;margin:0;font-weight:700}
.hp4 .cat-card .count{font-size:12px;color:var(--muted);margin-top:4px}
.hp4 .why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.hp4 .why-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.hp4 .why-icon{width:44px;height:44px;border-radius:12px;background:#E6F8FE;color:var(--primary-dark);display:grid;place-items:center;margin-bottom:10px;font-size:22px}
.hp4 .why-card h3{margin:0 0 6px;font-size:16px;font-weight:800}
.hp4 .why-card p{margin:0;color:var(--muted);font-size:14px}
.hp4 .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.hp4 .blog-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;color:var(--text);transition:transform .15s,box-shadow .15s}
.hp4 .blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.hp4 .blog-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--primary) 0%,#7C3AED 100%);display:grid;place-items:center;color:#fff;font-weight:900;font-size:22px;padding:12px;text-align:center}
.hp4 .blog-body{padding:14px 16px 16px}
.hp4 .blog-body h3{margin:0 0 8px;font-size:16px;font-weight:800;line-height:1.4}
.hp4 .blog-body p{margin:0;color:var(--muted);font-size:13px}
.hp4 .blog-meta{margin-top:10px;font-size:12px;color:var(--muted)}
.hp4 .seo-section{}
.hp4 .seo-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}
.hp4 .seo-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 28px;max-width:820px;line-height:1.9}
.hp4 .seo-content p{margin:0 0 14px;color:var(--text);font-size:15.5px}
.hp4 .seo-content .seo-lead{font-size:17px}
.hp4 .seo-content a{color:var(--primary-dark);text-decoration:none;border-bottom:1px dashed var(--primary);}
.hp4 .seo-content a:hover{color:var(--accent)}
.hp4 .seo-content strong{color:var(--text);font-weight:800}
.hp4 .seo-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--border)}
.hp4 .seo-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:700;color:var(--text);text-decoration:none;transition:all .15s}
.hp4 .seo-chip:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-1px)}
.hp4 .seo-chip svg{opacity:.85}
.hp4 .seo-aside{background:linear-gradient(160deg,var(--surface),var(--bg));border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;position:sticky;top:88px}
.hp4 .seo-aside h3{margin:0 0 4px;font-size:17px;font-weight:800}
.hp4 .seo-aside-sub{margin:0 0 14px;color:var(--muted);font-size:13.5px}
.hp4 .country-list{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.hp4 .country-list li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;padding:6px 10px;background:var(--surface);border:1px solid var(--border);border-radius:10px}
.hp4 .country-list .flag{font-size:18px;line-height:1}
.hp4 .country-list .tag{margin-inline-start:auto;background:var(--accent-yellow);color:#1A202C;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px}
.hp4 .trust-badges{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px dashed var(--border)}
.hp4 .trust-badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--success);background:rgba(16,185,129,.1);padding:5px 10px;border-radius:999px}
@media (max-width:900px){.hp4 .seo-grid{grid-template-columns:1fr}
.hp4 .seo-aside{position:static}}
.hp4 .newsletter-section{}
.hp4 .newsletter-card{background:linear-gradient(135deg,var(--primary) 0%,#0E9CCB 60%,#0F172A 130%);color:#fff;border-radius:20px;padding:38px 32px;display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.hp4 .newsletter-card::before{content:"";position:absolute;inset:auto -40px -40px auto;width:220px;height:220px;background:radial-gradient(circle,var(--accent-yellow) 0%,transparent 70%);opacity:.35;pointer-events:none}
.hp4 .newsletter-intro h2{margin:0 0 10px;font-size:26px;font-weight:900;color:#fff}
.hp4 .newsletter-intro p{margin:0 0 14px;color:rgba(255,255,255,.9);line-height:1.8;font-size:15px}
.hp4 .nl-benefits{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.hp4 .nl-benefits li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fff}
.hp4 .nl-benefits svg{color:var(--accent-yellow);flex-shrink:0}
.hp4 .newsletter-form{background:rgba(255,255,255,.98);border-radius:16px;padding:22px 22px 18px;display:grid;gap:12px;position:relative;z-index:1}
.hp4 .nl-field{display:grid;gap:6px}
.hp4 .nl-field label{font-size:13px;font-weight:700;color:var(--text)}
.hp4 .nl-field input,.hp4 .nl-field select{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:15px;background:#fff;color:var(--text);min-height:44px;transition:border-color .15s,box-shadow .15s}
.hp4 .nl-field input:focus,.hp4 .nl-field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(32,191,239,.15)}
.hp4 .nl-field input[aria-invalid="true"]{border-color:#DC2626}
.hp4 .nl-error{min-height:16px;font-size:12.5px;color:#DC2626;font-weight:600}
.hp4 .nl-submit{background:var(--accent);color:#fff;border:none;padding:13px 20px;border-radius:10px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;transition:background .15s,transform .1s}
.hp4 .nl-submit:hover:not(:disabled){background:#e85a24}
.hp4 .nl-submit:active{transform:translateY(1px)}
.hp4 .nl-submit:disabled{opacity:.7;cursor:not-allowed}
.hp4 .nl-spinner{display:none;animation:nl-spin 1s linear infinite}
.hp4 .nl-submit.loading .nl-spinner{display:inline-block}
.hp4 .nl-submit.loading .nl-submit-label{opacity:.75}
@keyframes nl-spin{to{transform:rotate(360deg)}}
.hp4 .nl-note{margin:0;font-size:12.5px;color:var(--muted);text-align:center}
.hp4 .nl-status{margin:6px 0 0;font-size:14px;font-weight:700;text-align:center;min-height:20px}
.hp4 .nl-status.success{color:var(--success)}
.hp4 .nl-status.error{color:#DC2626}
@media (max-width:820px){.hp4 .newsletter-card{grid-template-columns:1fr;padding:28px 22px}}
.hp4 .copy{text-align:center;margin-top:24px;font-size:13px;color:#94A3B8;border-top:1px solid #1E293B;padding-top:16px}
.hp4 .mobile-search-fab{display:none}
@media (max-width:920px){.hp4 .mobile-search-fab{display:flex;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 22px;border-radius:999px;font-weight:800;align-items:center;gap:8px;box-shadow:var(--shadow-lg);z-index:40;min-height:48px}}
.hp4 .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(40px);background:var(--text);color:#fff;padding:12px 22px;border-radius:10px;opacity:0;transition:all .25s;z-index:9999;font-weight:600}
.hp4 .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== SECTION BANDS - the treatment of the about page ( /aboutotlobcoupon-1 ).
   There the page is white and one section out of two is a full width band of
   --surface closed by a hair line on the top and on the bottom. Here the
   sections live inside .container, so the band is drawn with a spread shadow
   that is cut vertically by the clip-path, the markup does not change and no
   horizontal scroll appears. The hair lines are drawn the same way. ===== */
.hp4{background:var(--surface)}
.hp4 .container > .section{position:relative}
/* without the clip-path the shadow would bleed on the sections above and below,
   so the band is only drawn when the browser can cut it */
@supports (clip-path:inset(0 -100vw)) or (-webkit-clip-path:inset(0 -100vw)){
  .hp4 .container > .section:nth-of-type(even){background:var(--bg);box-shadow:0 0 0 100vw var(--bg);-webkit-clip-path:inset(0 -100vw);clip-path:inset(0 -100vw)}
  .hp4 .container > .section:nth-of-type(even)::before,
  .hp4 .container > .section:nth-of-type(even)::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--border);box-shadow:0 0 0 100vw var(--border);-webkit-clip-path:inset(0 -100vw);clip-path:inset(0 -100vw)}
  .hp4 .container > .section:nth-of-type(even)::before{top:0}
  .hp4 .container > .section:nth-of-type(even)::after{bottom:0}
  /* the bands follow each other, the rhythm comes from the padding of .section */
  .hp4 .container > .season-section{margin:0}
}

/* ===== SEASONAL OFFERS - taken from otlob.css, the base block and the home
   refinements of that file are merged here and scoped under .hp4 ===== */
.hp4 .season-section{margin:8px 0 32px}
.hp4 .season-lead{margin:-6px 0 14px;color:var(--muted);font-size:15px;max-width:820px}
.hp4 .season-wrap{position:relative;overflow:hidden;border-radius:22px;padding:22px;color:#fff;background:var(--season-bg,linear-gradient(135deg,#0E9CCB,#20BFEF));box-shadow:var(--shadow-lg)}
.hp4 .season-wrap::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:20px 20px;pointer-events:none}
.hp4 .season-head{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.hp4 .season-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);padding:6px 13px;border-radius:999px;font-weight:800;font-size:13px;backdrop-filter:blur(4px)}
.hp4 .season-title{margin:10px 0 4px;font-size:clamp(19px,2.2vw,24px);font-weight:900;line-height:1.25}
.hp4 .season-sub{margin:0;font-size:15px;opacity:.92;max-width:640px}
.hp4 .season-dates{margin-top:6px;font-size:13px;font-weight:700;opacity:.9}
.hp4 .countdown{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap}
.hp4 .cd-box{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:12px;min-width:62px;padding:8px 12px;text-align:center;display:grid;gap:2px;backdrop-filter:blur(4px)}
.hp4 .cd-num{display:block;font-size:20px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.hp4 .cd-lbl{font-size:11.5px;opacity:.9;font-weight:600}
.hp4 .season-deals{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:20px}
/* no color here, the card keeps the color of the links like in otlob.css, where
   the rule of the anchors wins over the one of the card */
.hp4 .season-deal{background:rgba(255,255,255,.96);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-sm);transition:.15s}
.hp4 .season-deal:hover{transform:translateY(-3px);text-decoration:none}
.hp4 .season-deal .sd-store{font-size:12.5px;font-weight:700;color:var(--muted)}
.hp4 .season-deal .sd-title{font-size:15px;font-weight:800;margin:0;line-height:1.4}
.hp4 .season-deal .sd-value{align-self:flex-start;background:var(--accent);color:#fff;font-weight:800;font-size:12.5px;padding:3px 10px;border-radius:999px}
.hp4 .season-deal .sd-country{font-size:12px;font-weight:700;color:var(--muted)}
.hp4 .season-deal .sd-cta{margin-top:auto;font-weight:800;font-size:13.5px;color:var(--primary-dark)}
.hp4 .season-foot{position:relative;z-index:1;margin-top:18px}
.hp4 .season-cta{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text);font-weight:800;padding:12px 20px;border-radius:12px;box-shadow:var(--shadow-sm);min-height:44px}
.hp4 .season-cta:hover{text-decoration:none;transform:translateY(-2px)}
/* the slider of the seasons. One slide carries its band and the cards that go
   with it, only the active one is shown. The band, the countdown and the cards
   keep the rules above, these only add the shell and the controls */
.hp4 .season-slide{display:none}
.hp4 .season-slide.active{display:block}
.hp4 .season-head .countdown{margin-top:14px}
.hp4 .season-deals{margin-top:14px}
.hp4 .season-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}
.hp4 .season-nav-btn{width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:.15s}
.hp4 .season-nav-btn:hover{border-color:var(--primary);color:var(--primary-dark)}
.hp4 .season-dots{display:flex;align-items:center;gap:8px}
.hp4 .season-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#CBD5E1;cursor:pointer;transition:.2s}
.hp4 .season-dot.active{background:var(--primary);width:24px;border-radius:999px}
@media (max-width:768px){.hp4 .season-title{font-size:20px}
.hp4 .season-sub,.hp4 .season-dates{font-size:13.5px}}
@media (max-width:640px){.hp4 .season-head{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.hp4 .season-cta:hover,.hp4 .season-deal:hover{transform:none}}

/* ===== MOBILE - TWO CARDS ON A ROW =====
   The stores, the coupons of the trending list and the deals of the season go
   two by two on a small screen. The coupon card is the tight one: its code and
   its button carry a minimum width made for a full row, without lifting it the
   two columns would push the page sideways. */
@media (max-width:680px){
/* minmax(0,1fr) and not 1fr: a track keeps the width of what is inside it, the
   coupon card is wide by nature and would push the column past the screen */
.hp4 .store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp4 .coupon-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp4 .season-deals{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp4 .coupon-list > li{min-width:0}
/* one column: the logo takes its own line at the top and the title reads on the
   whole width of the card instead of the strip left beside the logo */
.hp4 .coupon-card{grid-template-columns:1fr;padding:12px;gap:10px;min-width:0}
.hp4 .coupon-card .c-logo{width:56px;height:56px;font-size:14px}
.hp4 .coupon-body{min-width:0}
.hp4 .coupon-body h3{overflow-wrap:anywhere}
.hp4 .coupon-body h3{font-size:16px}
.hp4 .coupon-meta{gap:6px;font-size:12px}
/* the code and the button do not fit side by side in half a row, they are put
   one under the other inside the same dashed box so the code stays readable */
.hp4 .coupon-actions{min-width:0;flex-direction:column}
.hp4 .code-display{min-width:0;width:100%;font-size:14px;letter-spacing:1px;padding:8px 6px}
.hp4 .btn-reveal{min-width:0;width:100%;padding:10px;font-size:13px;min-height:44px}
.hp4 .store-card{padding:14px}
.hp4 .store-logo{width:60px;height:60px}
}