/* category2 - the design system of the attached screenshot, which is the one
   categories.html carries; every rule of it is unchanged and every selector is
   scoped under .otlob-page, the wrapper the design itself uses, so the shared
   names ( container, section, main ) cannot collide with the about theme that
   gives this page its header and its footer. The header, nav and footer rules
   of the original file are dropped, that chrome comes from header-about.php
   and footer-about.php.

   It is a copy and not a share. categories2 and stores2 each keep one of
   their own, so none of the three pages can move another by being edited, and
   categories.html itself is neither read at runtime nor modified. */

.otlob-page { --primary: #20bfef; --primary-dark: #0e9ccb; --accent: #ff6b35; --accent-yellow: #ffc93c; --bg: #f7fafc; --surface: #fff; --text: #1a202c; --muted: #5a6675; --border: #e2e8f0; --success: #10b981; --radius: 14px; --shadow-sm: 0 1px 2px #0000000d; --shadow: 0 4px 16px #0f1e3c14; --shadow-lg: 0 12px 32px #0f1e3c1f; --max: 1200px; }
.otlob-page *, .otlob-page ::before, .otlob-page ::after { box-sizing: border-box; }
.otlob-page { background: var(--bg); color: var(--text); min-height: 100vh; margin: 0px; font-family: Tajawal, system-ui, sans-serif; font-size: 16px; line-height: 1.7; }
.otlob-page img { max-width: 100%; height: auto; display: block; }
.otlob-page a { color: var(--primary-dark); text-decoration: none; }
.otlob-page a:hover { text-decoration: underline; }
.otlob-page button { cursor: pointer; background: none; border: none; font-family: inherit; }
.otlob-page .container { max-width: var(--max); margin: 0px auto; padding: 0px 16px; }
@media (width <= 920px) {
}
.otlob-page .hero { background: radial-gradient(1200px 500px at 90% -10%, rgba(32, 191, 239, 0.2), rgba(0, 0, 0, 0) 60%), radial-gradient(900px 400px at 0px 110%, rgba(255, 107, 53, 0.14), rgba(0, 0, 0, 0) 60%), linear-gradient(160deg, rgb(234, 249, 254) 0%, rgb(255, 247, 239) 100%); padding: 40px 0px 56px; position: relative; overflow: hidden; }
.otlob-page .hero::before { content: ""; pointer-events: none; z-index: 0; background-image: radial-gradient(rgba(15, 30, 60, 0.06) 1px, rgba(0, 0, 0, 0) 1px); background-size: 22px 22px; position: absolute; inset: 0px; mask-image: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0) 30%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0)); }
.otlob-page .hero-grid { z-index: 1; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 32px; display: grid; position: relative; }
@media (width <= 900px) {
  .otlob-page .hero-grid { grid-template-columns: 1fr; gap: 24px; }
}
.otlob-page .hero-left { flex-direction: column; gap: 18px; display: flex; }
.otlob-page .hero-badge { border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); border-radius: 999px; align-items: center; gap: 8px; width: max-content; padding: 7px 14px; font-size: 13px; font-weight: 700; display: inline-flex; }
.otlob-page .hero-badge .dot { background: var(--success); border-radius: 50%; width: 8px; height: 8px; animation: 1.8s ease 0s infinite normal none running pulseDot; box-shadow: rgba(16, 185, 129, 0.18) 0px 0px 0px 4px; }
@keyframes pulseDot { 
  50% { box-shadow: rgba(16, 185, 129, 0) 0px 0px 0px 8px; }
}
.otlob-page .hero h1 { letter-spacing: -0.01em; margin: 0px; font-size: clamp(28px, 4.2vw, 46px); font-weight: 900; line-height: 1.2; }
.otlob-page .hero h1 .accent { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; color: rgba(0, 0, 0, 0); background-clip: text; }
.otlob-page .hero p.lead { color: var(--muted); max-width: 560px; margin: 0px; font-size: clamp(15px, 1.5vw, 17px); }
.otlob-page .search-engine { box-shadow: var(--shadow-lg); border: 1px solid var(--border); background: rgb(255, 255, 255); border-radius: 18px; padding: 14px; }
.otlob-page .search-tabs { background: var(--bg); border-radius: 12px; gap: 6px; margin-bottom: 10px; padding: 4px; display: flex; }
.otlob-page .search-tab { color: var(--muted); cursor: pointer; background: none; border: 0px; border-radius: 9px; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 9px 12px; font-size: 13.5px; font-weight: 700; transition: 0.15s; display: inline-flex; }
.otlob-page .search-tab[aria-selected="true"] { color: var(--primary-dark); box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); }
.otlob-page .search-tab:hover { color: var(--text); }
.otlob-page .search-tab:focus-visible, .otlob-page .slider-nav:focus-visible, .otlob-page .slider-dot:focus-visible, .otlob-page .slide-cta:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 10px; }
.otlob-page .sr-only { clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; width: 1px; height: 1px; margin: -1px; padding: 0px; position: absolute; overflow: hidden; }
.otlob-page .search-form { align-items: stretch; gap: 8px; display: flex; }
.otlob-page .search-input-wrap { flex: 1 1 0%; min-width: 0px; position: relative; }
.otlob-page .search-input-wrap svg { color: var(--muted); pointer-events: none; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); }
.otlob-page .search-input-wrap input { border: 1.5px solid var(--border); width: 100%; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; background: var(--bg); border-radius: 12px; padding: 14px 44px 14px 14px; font-size: 15px; transition: 0.15s; }
.otlob-page .search-input-wrap input:focus { border-color: var(--primary); background: rgb(255, 255, 255); outline: none; box-shadow: rgba(32, 191, 239, 0.15) 0px 0px 0px 4px; }
.otlob-page .search-form button { background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color: rgb(255, 255, 255); border-radius: 12px; align-items: center; gap: 8px; min-height: 52px; padding: 0px 24px; font-size: 15px; font-weight: 800; transition: 0.15s; display: inline-flex; box-shadow: rgba(32, 191, 239, 0.35) 0px 6px 16px; }
.otlob-page .search-form button:hover { transform: translateY(-1px); box-shadow: rgba(32, 191, 239, 0.45) 0px 10px 20px; }
.otlob-page .popular-row { flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; display: flex; }
.otlob-page .popular-row span { color: var(--muted); font-weight: 600; }
.otlob-page .popular-row a { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; }
.otlob-page .popular-row a:hover { border-color: var(--primary); color: var(--primary-dark); text-decoration: none; }
.otlob-page .trust-row { flex-wrap: wrap; gap: 8px; margin-top: 4px; display: flex; }
.otlob-page .trust-pill { color: rgb(4, 120, 87); box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); border: 1px solid rgb(209, 250, 229); border-radius: 999px; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; display: inline-flex; }
.otlob-page .trust-pill svg { flex-shrink: 0; }
.otlob-page .offers-slider { box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background: rgb(255, 255, 255); border-radius: 22px; max-height: 460px; position: relative; overflow: hidden; }
@media (width <= 900px) {
  .otlob-page .offers-slider { aspect-ratio: 16 / 10; max-height: 340px; }
}
.otlob-page .slides { width: 100%; height: 100%; position: relative; }
.otlob-page .slide { opacity: 0; color: rgb(255, 255, 255); flex-direction: column; justify-content: flex-end; padding: 26px; transition: opacity 0.6s; display: flex; position: absolute; inset: 0px; }
.otlob-page .slide::before { content: ""; z-index: 1; background: linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0.85) 100%); position: absolute; inset: 0px; }
.otlob-page .slide.active { opacity: 1; z-index: 2; }
.otlob-page .slide > * { z-index: 2; position: relative; }
.otlob-page .slide-1 { background: linear-gradient(135deg, rgb(254, 231, 46) 0%, rgb(255, 107, 53) 100%); }
.otlob-page .slide-2 { background: linear-gradient(135deg, rgb(32, 191, 239) 0%, rgb(14, 76, 129) 100%); }
.otlob-page .slide-3 { background: linear-gradient(135deg, rgb(255, 62, 127) 0%, rgb(108, 92, 231) 100%); }
.otlob-page .slide-4 { background: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(6, 95, 70) 100%); }
.otlob-page .slide-tag { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; align-items: center; gap: 6px; width: max-content; margin-bottom: 10px; padding: 5px 12px; font-size: 12px; font-weight: 800; display: inline-flex; }
.otlob-page .slide-store { opacity: 0.92; margin: 0px 0px 4px; font-size: 13px; font-weight: 700; }
.otlob-page .slide-title { max-width: 90%; margin: 0px 0px 6px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; line-height: 1.3; }
.otlob-page .slide-desc { opacity: 0.92; max-width: 90%; margin: 0px 0px 14px; font-size: 13.5px; }
.otlob-page .slide-cta { color: var(--text); background: rgb(255, 255, 255); border-radius: 12px; align-items: center; gap: 8px; width: max-content; padding: 11px 20px; font-size: 14px; font-weight: 800; transition: 0.15s; display: inline-flex; }
.otlob-page .slide-cta:hover { color: var(--primary-dark); text-decoration: none; transform: translateY(-1px); }
.otlob-page .slide-code { color: var(--text); letter-spacing: 1px; border: 2px dashed var(--accent); z-index: 3; background: rgba(255, 255, 255, 0.95); border-radius: 10px; padding: 8px 14px; font-family: "Courier New", monospace; font-size: 14px; font-weight: 900; position: absolute; top: 20px; right: 20px; }
.otlob-page .slider-nav { width: 40px; height: 40px; color: var(--text); z-index: 5; box-shadow: var(--shadow); background: rgba(255, 255, 255, 0.95); border-radius: 50%; place-items: center; transition: 0.15s; display: grid; position: absolute; top: 50%; transform: translateY(-50%); }
.otlob-page .slider-nav:hover { background: rgb(255, 255, 255); transform: translateY(-50%) scale(1.08); }
.otlob-page .slider-prev { right: 12px; }
.otlob-page .slider-next { left: 12px; }
.otlob-page .slider-dots { z-index: 5; gap: 8px; display: flex; position: absolute; bottom: 16px; right: 50%; transform: translateX(50%); }
.otlob-page .slider-dot { cursor: pointer; background: rgba(255, 255, 255, 0.5); border-radius: 50%; width: 8px; height: 8px; transition: 0.2s; }
.otlob-page .slider-dot.active { background: rgb(255, 255, 255); border-radius: 4px; width: 24px; }
.otlob-page main { padding: 8px 0px 48px; }
.otlob-page .section { margin-top: 48px; }
.otlob-page .section-head { flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 18px; display: flex; }
.otlob-page .section-head h2 { align-items: center; gap: 10px; margin: 0px; font-size: clamp(20px, 2.4vw, 26px); display: flex; }
.otlob-page .section-head h2::before { content: ""; background: var(--primary); border-radius: 3px; width: 5px; height: 26px; }
.otlob-page .section-head .see-all { color: var(--primary-dark); font-size: 14px; font-weight: 700; }
.otlob-page .store-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; display: grid; }
.otlob-page .store-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; color: var(--text); flex-direction: column; gap: 8px; padding: 16px; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; display: flex; }
.otlob-page .store-card:hover { box-shadow: var(--shadow); border-color: var(--primary); text-decoration: none; transform: translateY(-3px); }
.otlob-page .store-logo { width: 72px; height: 72px; color: var(--primary-dark); border: 1px solid var(--border); background: rgb(241, 245, 249); border-radius: 14px; place-items: center; margin: 0px auto; font-size: 20px; font-weight: 900; display: grid; }
.otlob-page .store-card h3 { margin: 4px 0px 0px; font-size: 16px; font-weight: 800; }
.otlob-page .store-stats { color: var(--muted); font-size: 13px; }
.otlob-page .store-best { color: rgb(180, 83, 9); background: rgb(255, 243, 224); border-radius: 8px; margin: 0px auto; padding: 4px 10px; font-size: 12px; font-weight: 800; display: inline-block; }
.otlob-page .store-rating { color: var(--muted); justify-content: center; align-items: center; gap: 4px; font-size: 13px; display: flex; }
.otlob-page .store-rating .star { color: rgb(245, 158, 11); }
.otlob-page .store-cta { background: var(--primary); color: rgb(255, 255, 255); border-radius: 8px; justify-content: center; align-items: center; min-height: 38px; margin-top: auto; padding: 8px 14px; font-size: 14px; font-weight: 700; display: inline-flex; }
.otlob-page .store-card:hover .store-cta { background: var(--primary-dark); }
.otlob-page .coupon-list { gap: 14px; display: grid; }
.otlob-page .coupon-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); grid-template-columns: 64px 1fr auto; align-items: center; gap: 16px; padding: 18px; transition: transform 0.15s, box-shadow 0.15s; display: grid; }
.otlob-page .coupon-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.otlob-page .coupon-card .c-logo { width: 64px; height: 64px; color: var(--primary-dark); border: 1px solid var(--border); background: rgb(241, 245, 249); border-radius: 12px; place-items: center; font-size: 16px; font-weight: 900; display: grid; }
.otlob-page .coupon-body h3 { margin: 0px 0px 6px; font-size: 17px; font-weight: 700; }
.otlob-page .coupon-meta { color: var(--muted); flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; display: flex; }
.otlob-page .coupon-meta .verified { color: var(--success); align-items: center; gap: 4px; font-weight: 700; display: inline-flex; }
.otlob-page .discount-tag { background: var(--accent); color: rgb(255, 255, 255); border-radius: 8px; padding: 3px 9px; font-size: 12px; font-weight: 800; }
.otlob-page .coupon-actions { border: 2px dashed var(--primary); background: rgb(255, 255, 255); border-radius: 12px; align-items: stretch; min-width: 220px; display: flex; overflow: hidden; }
.otlob-page .code-display { letter-spacing: 2px; color: var(--primary-dark); user-select: all; background: repeating-linear-gradient(45deg, rgb(241, 245, 249), rgb(241, 245, 249) 6px, rgb(255, 255, 255) 6px, rgb(255, 255, 255) 12px); flex: 1 1 0%; justify-content: center; align-items: center; min-width: 80px; padding: 0px 12px; font-family: monospace; font-size: 16px; font-weight: 800; display: flex; position: relative; }
.otlob-page .code-display[data-masked="true"] { filter: blur(5px); cursor: pointer; user-select: none; }
.otlob-page .code-display[data-masked="true"]::after { content: "اضغط للكشف"; filter: blur(); color: var(--text); letter-spacing: 0px; background: rgba(255, 255, 255, 0.6); place-items: center; font-family: Tajawal, sans-serif; font-size: 12px; font-weight: 600; display: grid; position: absolute; inset: 0px; }
.otlob-page .btn-reveal { background: var(--primary); color: rgb(255, 255, 255); justify-content: center; align-items: center; gap: 6px; min-width: 130px; min-height: 52px; padding: 12px 18px; font-size: 14px; font-weight: 800; display: flex; }
.otlob-page .btn-reveal:hover, .otlob-page .btn-reveal:focus-visible { background: var(--primary-dark); }
.otlob-page .btn-reveal[data-copied="true"] { background: var(--success); }
.otlob-page .coupon-actions.deal-only { background: var(--primary); border-style: solid; }
.otlob-page .coupon-actions.deal-only .btn-reveal { width: 100%; }
@media (width <= 680px) {
  .otlob-page .coupon-card { grid-template-columns: 48px 1fr; gap: 12px; padding: 14px; }
  .otlob-page .coupon-card .c-logo { width: 48px; height: 48px; font-size: 13px; }
  .otlob-page .coupon-actions { grid-column: 1 / -1; min-width: 0px; }
}
@media (width >= 681px) and (width <= 1100px) {
  .otlob-page .coupon-list { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; }
  .otlob-page .coupon-list > li { height: 100%; }
  .otlob-page .coupon-card { grid-template-columns: 48px 1fr; align-content: start; gap: 12px; height: 100%; padding: 14px; }
  .otlob-page .coupon-card .c-logo { width: 48px; height: 48px; font-size: 13px; }
  .otlob-page .coupon-actions { grid-column: 1 / -1; align-self: end; min-width: 0px; }
}
.otlob-page .cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; display: grid; }
.otlob-page .cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; color: var(--text); padding: 18px 12px; transition: transform 0.15s, border-color 0.15s; }
.otlob-page .cat-card:hover { border-color: var(--primary); text-decoration: none; transform: translateY(-3px); }
.otlob-page .cat-icon { background: linear-gradient(135deg, rgb(230, 248, 254), rgb(255, 245, 236)); border-radius: 14px; place-items: center; width: 56px; height: 56px; margin: 0px auto 10px; font-size: 26px; display: grid; }
.otlob-page .cat-card h3 { margin: 0px; font-size: 15px; font-weight: 700; }
.otlob-page .cat-card .count { color: var(--muted); margin-top: 4px; font-size: 12px; }
.otlob-page .why-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; display: grid; }
.otlob-page .why-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.otlob-page .why-icon { width: 44px; height: 44px; color: var(--primary-dark); background: rgb(230, 248, 254); border-radius: 12px; place-items: center; margin-bottom: 10px; font-size: 22px; display: grid; }
.otlob-page .why-card h3 { margin: 0px 0px 6px; font-size: 16px; font-weight: 800; }
.otlob-page .why-card p { color: var(--muted); margin: 0px; font-size: 14px; }
.otlob-page .blog-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; display: grid; }
.otlob-page .blog-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); flex-direction: column; transition: transform 0.15s, box-shadow 0.15s; display: flex; overflow: hidden; }
.otlob-page .blog-card:hover { box-shadow: var(--shadow); text-decoration: none; transform: translateY(-3px); }
.otlob-page .blog-thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg,var(--primary) 0%,#7c3aed 100%); color: rgb(255, 255, 255); text-align: center; place-items: center; padding: 12px; font-size: 22px; font-weight: 900; display: grid; }
.otlob-page .blog-body { padding: 14px 16px 16px; }
.otlob-page .blog-body h3 { margin: 0px 0px 8px; font-size: 16px; font-weight: 800; line-height: 1.4; }
.otlob-page .blog-body p { color: var(--muted); margin: 0px; font-size: 13px; }
.otlob-page .blog-meta { color: var(--muted); margin-top: 10px; font-size: 12px; }
.otlob-page .seo-grid { grid-template-columns: 2fr 1fr; align-items: start; gap: 24px; display: grid; }
.otlob-page .seo-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-width: 820px; padding: 26px 28px; line-height: 1.9; }
.otlob-page .seo-content p { color: var(--text); margin: 0px 0px 14px; font-size: 15.5px; }
.otlob-page .seo-content .seo-lead { font-size: 17px; }
.otlob-page .seo-content a { color: var(--primary-dark); border-bottom: 1px dashed var(--primary); text-decoration: none; }
.otlob-page .seo-content a:hover { color: var(--accent); }
.otlob-page .seo-content strong { color: var(--text); font-weight: 800; }
.otlob-page .seo-links { border-top: 1px dashed var(--border); flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; display: flex; }
.otlob-page .seo-chip { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 999px; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: 0.15s; display: inline-flex; }
.otlob-page .seo-chip:hover { background: var(--primary); color: rgb(255, 255, 255); border-color: var(--primary); transform: translateY(-1px); }
.otlob-page .seo-chip svg { opacity: 0.85; }
.otlob-page .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; }
.otlob-page .seo-aside h3 { margin: 0px 0px 4px; font-size: 17px; font-weight: 800; }
.otlob-page .seo-aside-sub { color: var(--muted); margin: 0px 0px 14px; font-size: 13.5px; }
.otlob-page .country-list { gap: 8px; margin: 0px 0px 16px; padding: 0px; list-style: none; display: grid; }
.otlob-page .country-list li { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; align-items: center; gap: 8px; padding: 6px 10px; font-size: 14.5px; font-weight: 600; display: flex; }
.otlob-page .country-list .flag { font-size: 18px; line-height: 1; }
.otlob-page .country-list .tag { background: var(--accent-yellow); color: rgb(26, 32, 44); border-radius: 999px; margin-inline-start: auto; padding: 2px 8px; font-size: 11px; font-weight: 800; }
.otlob-page .trust-badges { border-top: 1px dashed var(--border); flex-wrap: wrap; gap: 8px; padding-top: 12px; display: flex; }
.otlob-page .trust-badge { color: var(--success); background: rgba(16, 185, 129, 0.1); border-radius: 999px; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12.5px; font-weight: 700; display: inline-flex; }
@media (width <= 900px) {
  .otlob-page .seo-grid { grid-template-columns: 1fr; }
  .otlob-page .seo-aside { position: static; }
}
.otlob-page .newsletter-card { background: linear-gradient(135deg,var(--primary) 0%,#0e9ccb 60%,#0f172a 130%); color: rgb(255, 255, 255); box-shadow: var(--shadow-lg); border-radius: 20px; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 32px; padding: 38px 32px; display: grid; position: relative; overflow: hidden; }
.otlob-page .newsletter-card::before { content: ""; background: radial-gradient(circle,var(--accent-yellow) 0%,transparent 70%); opacity: 0.35; pointer-events: none; width: 220px; height: 220px; position: absolute; inset: auto -40px -40px auto; }
.otlob-page .newsletter-intro h2 { color: rgb(255, 255, 255); margin: 0px 0px 10px; font-size: 26px; font-weight: 900; }
.otlob-page .newsletter-intro p { color: rgba(255, 255, 255, 0.9); margin: 0px 0px 14px; font-size: 15px; line-height: 1.8; }
.otlob-page .nl-benefits { gap: 8px; margin: 0px; padding: 0px; list-style: none; display: grid; }
.otlob-page .nl-benefits li { color: rgb(255, 255, 255); align-items: center; gap: 8px; font-size: 14px; font-weight: 600; display: flex; }
.otlob-page .nl-benefits svg { color: var(--accent-yellow); flex-shrink: 0; }
.otlob-page .newsletter-form { z-index: 1; background: rgba(255, 255, 255, 0.98); border-radius: 16px; gap: 12px; padding: 22px 22px 18px; display: grid; position: relative; }
.otlob-page .nl-field { gap: 6px; display: grid; }
.otlob-page .nl-field label { color: var(--text); font-size: 13px; font-weight: 700; }
.otlob-page .nl-field input, .otlob-page .nl-field select { border: 1.5px solid var(--border); width: 100%; color: var(--text); background: rgb(255, 255, 255); border-radius: 10px; min-height: 44px; padding: 12px 14px; font-family: inherit; font-size: 15px; transition: border-color 0.15s, box-shadow 0.15s; }
.otlob-page .nl-field input:focus, .otlob-page .nl-field select:focus { border-color: var(--primary); outline: none; box-shadow: rgba(32, 191, 239, 0.15) 0px 0px 0px 3px; }
.otlob-page .nl-field input[aria-invalid="true"] { border-color: rgb(220, 38, 38); }
.otlob-page .nl-error { color: rgb(220, 38, 38); min-height: 16px; font-size: 12.5px; font-weight: 600; }
.otlob-page .nl-submit { background: var(--accent); color: rgb(255, 255, 255); cursor: pointer; border: none; border-radius: 10px; justify-content: center; align-items: center; gap: 8px; min-height: 48px; padding: 13px 20px; font-family: inherit; font-size: 15px; font-weight: 800; transition: background 0.15s, transform 0.1s; display: inline-flex; }
.otlob-page .nl-submit:hover:not(:disabled) { background: rgb(232, 90, 36); }
.otlob-page .nl-submit:active { transform: translateY(1px); }
.otlob-page .nl-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.otlob-page .nl-spinner { animation: 1s linear 0s infinite normal none running nl-spin; display: none; }
.otlob-page .nl-submit.loading .nl-spinner { display: inline-block; }
.otlob-page .nl-submit.loading .nl-submit-label { opacity: 0.75; }
@keyframes nl-spin { 
  100% { transform: rotate(360deg); }
}
.otlob-page .nl-note { color: var(--muted); text-align: center; margin: 0px; font-size: 12.5px; }
.otlob-page .nl-status { text-align: center; min-height: 20px; margin: 6px 0px 0px; font-size: 14px; font-weight: 700; }
.otlob-page .nl-status.success { color: var(--success); }
.otlob-page .nl-status.error { color: rgb(220, 38, 38); }
@media (width <= 820px) {
  .otlob-page .newsletter-card { grid-template-columns: 1fr; padding: 28px 22px; }
}
.otlob-page .copy { text-align: center; color: rgb(148, 163, 184); border-top: 1px solid rgb(30, 41, 59); margin-top: 24px; padding-top: 16px; font-size: 13px; }
@media (width <= 920px) {
}
.otlob-page .toast { background: var(--text); color: rgb(255, 255, 255); opacity: 0; z-index: 9999; border-radius: 10px; padding: 12px 22px; font-weight: 600; transition: 0.25s; position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(40px); }
.otlob-page .toast.show { opacity: 1; transform: translateX(-50%) translateY(0px); }
.otlob-page .season-wrap { color: rgb(255, 255, 255); background: var(--season-bg, linear-gradient(135deg,#0e9ccb,#20bfef)); box-shadow: var(--shadow-lg); border-radius: 22px; padding: 26px; position: relative; overflow: hidden; }
.otlob-page .season-wrap::after { content: ""; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, rgba(0, 0, 0, 0) 1px); background-size: 20px 20px; position: absolute; inset: 0px; }
.otlob-page .season-head { z-index: 1; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; display: flex; position: relative; }
.otlob-page .season-badge { backdrop-filter: blur(4px); background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; align-items: center; gap: 8px; padding: 6px 13px; font-size: 13px; font-weight: 800; display: inline-flex; }
.otlob-page .season-title { margin: 10px 0px 4px; font-size: clamp(22px, 3vw, 32px); font-weight: 900; line-height: 1.25; }
.otlob-page .season-sub { opacity: 0.92; max-width: 640px; margin: 0px; font-size: 15px; }
.otlob-page .season-dates { opacity: 0.9; margin-top: 6px; font-size: 13px; font-weight: 700; }
.otlob-page .countdown { z-index: 1; gap: 8px; display: flex; position: relative; }
.otlob-page .cd-box { text-align: center; backdrop-filter: blur(4px); background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; min-width: 62px; padding: 8px 6px; }
.otlob-page .cd-num { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 900; line-height: 1; display: block; }
.otlob-page .cd-lbl { opacity: 0.9; font-size: 11px; font-weight: 600; }
.otlob-page .season-deals { z-index: 1; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 20px; display: grid; position: relative; }
.otlob-page .season-deal { color: var(--text); box-shadow: var(--shadow-sm); background: rgba(255, 255, 255, 0.96); border-radius: 14px; flex-direction: column; gap: 6px; padding: 14px; transition: 0.15s; display: flex; }
.otlob-page .season-deal:hover { text-decoration: none; transform: translateY(-3px); }
.otlob-page .season-deal .sd-store { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.otlob-page .season-deal .sd-title { margin: 0px; font-size: 15px; font-weight: 800; line-height: 1.4; }
.otlob-page .season-deal .sd-value { background: var(--accent); color: rgb(255, 255, 255); border-radius: 999px; align-self: flex-start; padding: 3px 10px; font-size: 12.5px; font-weight: 800; }
.otlob-page .season-deal .sd-code { letter-spacing: 1px; border: 1.5px dashed var(--border); text-align: center; border-radius: 9px; padding: 6px 10px; font-family: ui-monospace, monospace; font-size: 13.5px; font-weight: 800; }
.otlob-page .season-next { z-index: 1; opacity: 0.9; margin: 14px 0px 0px; font-size: 13.5px; position: relative; }
@media (width <= 640px) {
  .otlob-page .season-head { flex-direction: column; align-items: flex-start; }
}
.otlob-page .season-section { margin: 8px 0px 32px; }
.otlob-page .season-lead { color: var(--muted); max-width: 820px; margin: -6px 0px 14px; font-size: 15px; }
.otlob-page .season-wrap { padding: 22px; }
.otlob-page .season-title { font-size: clamp(19px, 2.2vw, 24px); }
.otlob-page .season-deal .sd-country { color: var(--muted); font-size: 12px; font-weight: 700; }
.otlob-page .season-deal .sd-cta { color: var(--primary-dark); font-size: 13.5px; font-weight: 800; }
.otlob-page .season-foot { z-index: 1; margin-top: 18px; position: relative; }
.otlob-page .season-cta { color: var(--text); box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); border-radius: 12px; align-items: center; gap: 8px; min-height: 44px; padding: 12px 20px; font-weight: 800; display: inline-flex; }
.otlob-page .season-cta:hover { text-decoration: none; transform: translateY(-2px); }
.otlob-page .countdown { flex-wrap: wrap; gap: 8px; display: flex; }
.otlob-page .cd-box { text-align: center; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; gap: 2px; min-width: 62px; padding: 8px 12px; display: grid; }
.otlob-page .cd-num { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 900; }
.otlob-page .cd-lbl { opacity: 0.9; font-size: 11.5px; }
.otlob-page .offers-hero { border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(32, 191, 239, 0.12), rgba(255, 107, 53, 0.12)); padding: 28px 0px 22px; }
.otlob-page .offers-hero h1 { margin: 0px 0px 10px; font-size: clamp(22px, 3.2vw, 34px); line-height: 1.3; }
.otlob-page .offers-hero-lead { color: var(--muted); max-width: 820px; margin: 0px; }
.otlob-page .offers-trust { color: var(--text); flex-wrap: wrap; gap: 8px 16px; margin: 14px 0px 8px; padding: 0px; font-size: 13.5px; font-weight: 700; list-style: none; display: flex; }
.otlob-page .offers-trust li { border: 1px solid var(--border); background: rgb(255, 255, 255); border-radius: 999px; padding: 6px 13px; }
.otlob-page .offers-method-link { font-size: 14px; font-weight: 700; }
.otlob-page .country-tabs { scrollbar-width: none; gap: 8px; max-width: 100%; margin: 0px; padding: 16px 0px 4px; list-style: none; display: flex; overflow-x: auto; }
.otlob-page .country-tabs::-webkit-scrollbar { display: none; }
.otlob-page .country-tabs-wrap { margin: 0px; }
.otlob-page .country-tab { white-space: nowrap; background: var(--surface); border: 1px solid var(--border); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; color: var(--text); cursor: pointer; border-radius: 999px; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; font-size: 14px; font-weight: 700; text-decoration: none; display: inline-flex; }
.otlob-page .country-tab:hover { border-color: var(--primary); color: var(--primary-dark); }
.otlob-page .country-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.otlob-page .country-tab .country-code { opacity: 0.75; letter-spacing: 0.02em; font-size: 12px; font-weight: 700; }
.otlob-page .country-tab.active, .otlob-page .country-tab.active:hover { background: var(--primary); border-color: var(--primary); color: rgb(255, 255, 255); }
.otlob-page .country-tab.active .country-code { opacity: 0.9; }
.otlob-page .offer-filters { gap: 8px; margin-bottom: 16px; display: grid; }
.otlob-page .filter-row { flex-wrap: wrap; gap: 8px; display: flex; }
.otlob-page .filter-chip { background: var(--surface); border: 1px solid var(--border); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; color: var(--muted); cursor: pointer; border-radius: 999px; min-height: 40px; padding: 8px 14px; font-size: 13.5px; font-weight: 700; }
.otlob-page .filter-chip.active { background: var(--text); border-color: var(--text); color: rgb(255, 255, 255); }
.otlob-page .offers-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; display: grid; }
.otlob-page .offer-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); flex-direction: column; gap: 10px; padding: 16px; display: flex; }
.otlob-page .offer-card-head { justify-content: space-between; align-items: center; gap: 10px; display: flex; }
.otlob-page .offer-store { align-items: center; gap: 10px; min-width: 0px; display: flex; }
.otlob-page .offer-store img, .otlob-page .offer-store-fallback { object-fit: contain; background: var(--bg); width: 44px; height: 44px; color: var(--primary-dark); border-radius: 12px; flex: 0 0 auto; place-items: center; font-weight: 900; display: grid; }
.otlob-page .offer-store-name { margin: 0px; font-size: 15px; font-weight: 800; }
.otlob-page .offer-country { color: var(--muted); margin: 0px; font-size: 12.5px; }
.otlob-page .offer-value { background: var(--accent); color: rgb(255, 255, 255); white-space: nowrap; border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 800; }
.otlob-page .offer-title { margin: 0px; font-size: 16px; line-height: 1.45; }
.otlob-page .offer-desc { color: var(--muted); margin: 0px; font-size: 14px; }
.otlob-page .offer-meta { flex-wrap: wrap; gap: 6px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .offer-meta li { background: var(--bg); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.otlob-page .offer-meta .offer-type { color: var(--primary-dark); background: rgba(32, 191, 239, 0.14); border-color: rgba(0, 0, 0, 0); }
.otlob-page .offer-meta .verified { color: rgb(11, 122, 92); background: rgba(16, 185, 129, 0.14); border-color: rgba(0, 0, 0, 0); }
.otlob-page .offer-terms { color: var(--muted); margin: 0px; font-size: 12.5px; }
.otlob-page .offer-code { letter-spacing: 1px; border: 1.5px dashed var(--border); text-align: center; border-radius: 10px; padding: 8px; font-family: ui-monospace, monospace; font-weight: 800; }
.otlob-page .offer-cta { background: var(--primary); color: rgb(255, 255, 255); border-radius: 11px; justify-content: center; align-items: center; min-height: 44px; margin-top: auto; padding: 11px 16px; font-weight: 800; display: inline-flex; }
.otlob-page .offer-cta:hover { background: var(--primary-dark); color: rgb(255, 255, 255); text-decoration: none; }
.otlob-page .offers-more { justify-content: center; margin-top: 18px; display: flex; }
.otlob-page .btn-more { background: var(--surface); border: 1px solid var(--border); font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; cursor: pointer; border-radius: 12px; min-height: 44px; padding: 12px 22px; font-weight: 800; }
.otlob-page .offers-empty { color: var(--muted); }
.otlob-page .season-wrap-page { margin-bottom: 16px; }
.otlob-page .upcoming-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; display: grid; }
.otlob-page .upcoming-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); flex-direction: column; gap: 6px; padding: 14px; display: flex; }
.otlob-page .upcoming-card h3 { margin: 0px; font-size: 16px; }
.otlob-page .upcoming-card p { color: var(--muted); margin: 0px; font-size: 13.5px; }
.otlob-page .upcoming-badge { font-size: 13px; font-weight: 800; }
.otlob-page .upcoming-date { font-weight: 700; }
.otlob-page .upcoming-status { background: var(--bg); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; align-self: flex-start; padding: 3px 11px; font-size: 12px; font-weight: 700; }
.otlob-page .store-offer-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; display: grid; }
.otlob-page .store-offer-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); gap: 4px; padding: 14px; display: grid; }
.otlob-page .store-offer-name { color: var(--text); font-weight: 800; }
.otlob-page .store-offer-count { color: var(--muted); font-size: 13px; }
.otlob-page .trust-text { color: var(--muted); max-width: 820px; }
@media (width <= 768px) {
  .otlob-page .offers-hero { padding: 20px 0px 16px; }
  .otlob-page .offers-hero-lead { font-size: 14px; line-height: 1.7; }
  .otlob-page .offers-trust { gap: 6px; margin: 12px 0px 6px; font-size: 12.5px; }
  .otlob-page .offers-trust li { padding: 5px 10px; }
  .otlob-page .country-tabs { z-index: 5; background: var(--bg); scroll-snap-type: x mandatory; border-bottom: 1px solid var(--border); gap: 6px; margin: 0px -16px; padding: 10px 16px; position: sticky; top: 0px; }
  .otlob-page .country-tabs::-webkit-scrollbar { display: none; }
  .otlob-page .country-tab { scroll-snap-align: start; padding: 8px 14px; font-size: 13.5px; }
  .otlob-page .filter-row { scrollbar-width: none; flex-wrap: nowrap; margin: 0px -16px; padding: 2px 16px; overflow-x: auto; }
  .otlob-page .filter-row::-webkit-scrollbar { display: none; }
  .otlob-page .filter-chip { flex: 0 0 auto; }
  .otlob-page .offers-grid { grid-template-columns: 1fr; gap: 12px; }
  .otlob-page .offer-card { gap: 9px; padding: 14px; }
  .otlob-page .offer-card-head { align-items: flex-start; }
  .otlob-page .offer-store img, .otlob-page .offer-store-fallback { border-radius: 10px; width: 38px; height: 38px; }
  .otlob-page .offer-store-name { overflow-wrap: anywhere; font-size: 14.5px; }
  .otlob-page .offer-value { padding: 4px 10px; font-size: 12.5px; }
  .otlob-page .offer-title { font-size: 15.5px; }
  .otlob-page .offer-desc { -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 13.5px; display: -webkit-box; overflow: hidden; }
  .otlob-page .offer-cta { width: 100%; min-height: 46px; }
  .otlob-page .btn-more { width: 100%; }
  .otlob-page .cat-grid { grid-template-columns: repeat(auto-fill, minmax(45%, 1fr)); gap: 10px; }
  .otlob-page .upcoming-grid, .otlob-page .store-offer-grid { grid-template-columns: 1fr; gap: 10px; }
  .otlob-page .season-wrap-page { padding: 18px 16px; }
  .otlob-page .season-title { font-size: 20px; }
  .otlob-page .season-sub, .otlob-page .season-dates { font-size: 13.5px; }
}
@media (width <= 340px) {
  .otlob-page .offer-card-head { flex-direction: column; align-items: flex-start; }
  .otlob-page .offer-value { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .otlob-page .season-cta:hover, .otlob-page .season-deal:hover { transform: none; }
  .otlob-page * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}
.otlob-page .dir-hero .dir-breadcrumbs { margin-bottom: 10px; }
.otlob-page .dir-breadcrumbs ol { flex-wrap: wrap; gap: 6px; margin: 0px; padding: 0px; font-size: 13px; list-style: none; display: flex; }
.otlob-page .dir-breadcrumbs li + li::before { content: "‹"; opacity: 0.6; margin-inline-end: 6px; }
.otlob-page .dir-breadcrumbs a { color: inherit; opacity: 0.85; text-decoration: none; }
.otlob-page .dir-breadcrumbs a:hover { text-decoration: underline; }
.otlob-page .dir-controls { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 18px 0px 6px; display: grid; }
.otlob-page .dir-controls-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); max-width: 640px; }
.otlob-page .dir-field { flex-direction: column; gap: 6px; display: flex; }
.otlob-page .dir-field label { color: rgb(71, 85, 105); font-size: 13px; font-weight: 700; }
.otlob-page .dir-field input, .otlob-page .dir-field select { width: 100%; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; color: rgb(15, 23, 42); background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 12px; padding: 11px 14px; font-size: 15px; }
.otlob-page .dir-field input:focus-visible, .otlob-page .dir-field select:focus-visible { outline-offset: 2px; outline: rgb(255, 107, 53) solid 2px; }
.otlob-page .dir-count { color: rgb(100, 116, 139); font-size: 14px; font-weight: 700; }
.otlob-page .dir-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; display: grid; }
.otlob-page .dir-card { background: rgb(255, 255, 255); border: 1px solid rgb(233, 238, 245); border-radius: 16px; flex-direction: column; gap: 10px; padding: 16px; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; display: flex; position: relative; }
.otlob-page .dir-card:hover { border-color: rgb(255, 215, 196); transform: translateY(-3px); box-shadow: rgba(15, 23, 42, 0.08) 0px 14px 30px; }
.otlob-page .dir-card:focus-within { border-color: rgb(255, 107, 53); }
.otlob-page .dir-card a { color: inherit; text-decoration: none; }
.otlob-page .store-card-name a::after, .otlob-page .category-card-name a::after { content: ""; border-radius: 16px; position: absolute; inset: 0px; }
.otlob-page .store-card-top { grid-template-columns: 64px minmax(0px, 1fr); align-items: center; gap: 12px; display: grid; }
.otlob-page .store-logo-box { background: rgb(248, 250, 252); border: 1px solid rgb(238, 242, 247); border-radius: 14px; flex-shrink: 0; place-items: center; width: 64px; height: 64px; display: grid; overflow: hidden; }
.otlob-page .store-logo-box img { object-fit: contain; width: 100%; height: 100%; padding: 6px; }
.otlob-page .store-logo-fallback, .otlob-page .category-logo-fallback { color: rgb(255, 107, 53); font-size: 22px; font-weight: 800; }
.otlob-page .store-card-id { flex-direction: column; gap: 2px; min-width: 0px; display: flex; }
.otlob-page .store-card-name, .otlob-page .category-card-name { color: rgb(15, 23, 42); margin: 0px; font-size: 17px; font-weight: 800; }
.otlob-page .store-card-en { color: rgb(148, 163, 184); font-size: 12px; }
.otlob-page .store-card-cat { color: rgb(71, 85, 105); font-size: 12px; font-weight: 700; }
.otlob-page .store-card-countries { color: rgb(100, 116, 139); margin: 0px; font-size: 12px; line-height: 1.7; }
.otlob-page .store-card-status { color: rgb(22, 163, 74); margin: 0px; font-size: 13px; font-weight: 700; }
.otlob-page .store-card-cta, .otlob-page .category-card-cta, .otlob-page .dir-inline-cta { color: rgb(255, 107, 53); align-self: flex-start; margin-top: auto; font-size: 14px; font-weight: 800; }
.otlob-page .dir-inline-cta { margin-top: 10px; display: inline-block; }
.otlob-page .category-card-head { align-items: center; gap: 10px; display: flex; }
.otlob-page .category-icon { font-size: 26px; line-height: 1; }
.otlob-page .category-card-desc { color: rgb(71, 85, 105); margin: 0px; font-size: 14px; line-height: 1.8; }
.otlob-page .category-card-count { color: rgb(100, 116, 139); margin: 0px; font-size: 13px; font-weight: 700; }
.otlob-page .category-logos { flex-wrap: wrap; gap: 8px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .category-logos li { background: rgb(248, 250, 252); border: 1px solid rgb(238, 242, 247); border-radius: 10px; place-items: center; width: 36px; height: 36px; display: grid; overflow: hidden; }
.otlob-page .category-logos img { object-fit: contain; width: 100%; height: 100%; padding: 4px; }
.otlob-page .category-subs { flex-wrap: wrap; gap: 6px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .category-subs a { z-index: 1; color: rgb(71, 85, 105); background: rgb(241, 245, 249); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; position: relative; }
.otlob-page .dir-empty { text-align: center; color: rgb(71, 85, 105); border: 1px dashed rgb(219, 227, 236); border-radius: 16px; padding: 28px 18px; }
.otlob-page .dir-empty p { margin: 0px; font-size: 15px; }
.otlob-page .dir-pagination { margin-top: 20px; }
.otlob-page .dir-pagination ul { flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .page-link { color: rgb(15, 23, 42); background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 12px; place-items: center; min-width: 44px; min-height: 44px; padding: 0px 12px; font-size: 14px; font-weight: 700; text-decoration: none; display: inline-grid; }
.otlob-page .page-link.active { color: rgb(255, 255, 255); background: rgb(255, 107, 53); border-color: rgb(255, 107, 53); }
.otlob-page .page-link.disabled { opacity: 0.45; }
.otlob-page .dir-links { flex-wrap: wrap; gap: 10px 18px; margin: 12px 0px 0px; padding: 0px; font-size: 14px; font-weight: 700; list-style: none; display: flex; }
.otlob-page .dir-links a { color: rgb(255, 107, 53); text-decoration: none; }
.otlob-page .dir-note { color: rgb(100, 116, 139); margin: 10px 0px 0px; font-size: 13px; }
@media (width <= 640px) {
  .otlob-page .dir-grid, .otlob-page .dir-controls { grid-template-columns: 1fr; }
  .otlob-page .dir-controls-2 { grid-template-columns: 1fr; max-width: none; }
  .otlob-page .dir-card { padding: 14px; }
}
.otlob-page .campaigns-stack { gap: 28px; display: grid; }
.otlob-page .campaign-section { margin-bottom: 4px; }
.otlob-page .campaign-banner { background: linear-gradient(135deg, var(--cmp-start), var(--cmp-end)); color: var(--cmp-text); border-radius: 20px; padding: 28px; position: relative; overflow: hidden; }
.otlob-page .campaign-banner.mode-image { padding: 0px; }
.otlob-page .campaign-banner-media { position: absolute; inset: 0px; }
.otlob-page .campaign-banner-media img { object-fit: cover; object-position: var(--cmp-focal, center); width: 100%; height: 100%; }
.otlob-page .campaign-banner.mode-image .campaign-banner-body { background: linear-gradient(180deg, rgba(0,0,0,calc(var(--cmp-overlay) * .6)), rgba(0,0,0,var(--cmp-overlay))); padding: 40px 28px; position: relative; }
.otlob-page .campaign-badge { background: var(--cmp-badge); color: inherit; border-radius: 999px; align-items: center; gap: 8px; padding: 6px 14px; font-size: 13px; font-weight: 700; display: inline-flex; }
.otlob-page .campaign-title { color: inherit; margin: 12px 0px 8px; font-size: clamp(22px, 3vw, 30px); }
.otlob-page .campaign-desc { opacity: 0.92; max-width: 60ch; color: inherit; margin: 0px 0px 10px; }
.otlob-page .campaign-dates, .otlob-page .campaign-left { opacity: 0.9; color: inherit; margin: 0px 0px 6px; font-size: 14px; }
.otlob-page .campaign-left { opacity: 1; font-weight: 700; }
.otlob-page .campaign-banner-body .countdown { color: inherit; margin-top: 12px; }
.otlob-page .campaign-cta { background: var(--cmp-btn-bg); color: var(--cmp-btn-text); border-radius: 999px; margin-top: 14px; padding: 12px 22px; font-weight: 800; text-decoration: none; display: inline-block; }
.otlob-page .campaign-cta:hover { filter: brightness(0.95); }
.otlob-page .campaign-grid { margin-top: 20px; }
@media (width <= 640px) {
  .otlob-page .campaign-banner { border-radius: 16px; padding: 20px; }
  .otlob-page .campaign-banner.mode-image .campaign-banner-body { padding: 28px 20px; }
  .otlob-page .campaign-cta { text-align: center; display: block; }
}
.otlob-page .hero-grid > .hero-left { order: 2; }
.otlob-page .hero-grid > .offers-slider { order: 1; }
.otlob-page .store-suggest { gap: 6px; margin: 10px 0px 0px; padding: 0px; list-style: none; display: grid; }
.otlob-page .store-suggest a { border: 1px solid var(--border); color: var(--text); background: rgb(255, 255, 255); border-radius: 12px; align-items: center; gap: 10px; padding: 8px 10px; text-decoration: none; display: flex; }
.otlob-page .store-suggest a:hover, .otlob-page .store-suggest a:focus-visible { border-color: var(--primary); background: rgb(248, 250, 252); }
.otlob-page .store-suggest img, .otlob-page .store-suggest-fallback { object-fit: contain; width: 40px; height: 40px; color: var(--primary-dark); background: rgb(241, 245, 249); border-radius: 10px; flex: 0 0 auto; place-items: center; font-weight: 900; display: grid; }
.otlob-page .store-suggest-body { gap: 2px; min-width: 0px; display: grid; }
.otlob-page .store-suggest-name { font-size: 15px; font-weight: 800; }
.otlob-page .store-suggest-note { color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; overflow: hidden; }
.otlob-page .store-suggest-empty { color: var(--muted); margin: 10px 0px 0px; font-size: 14px; font-weight: 700; }
.otlob-page .hcs { position: relative; }
.otlob-page .hcs:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; border-radius: 20px; }
.otlob-page .hcs-slide { display: none; }
.otlob-page .hcs-slide.active { gap: 14px; display: grid; }
.otlob-page .hcs-slide .campaign-banner { min-height: 240px; }
.otlob-page .hcs-controls { justify-content: center; align-items: center; gap: 12px; margin-top: 14px; display: flex; }
.otlob-page .hcs-nav { border: 1px solid var(--border); width: 40px; height: 40px; color: var(--primary-dark); cursor: pointer; background: rgb(255, 255, 255); border-radius: 999px; place-items: center; font-size: 22px; line-height: 1; display: grid; }
.otlob-page .hcs-nav:hover, .otlob-page .hcs-nav:focus-visible { background: var(--primary); color: rgb(255, 255, 255); border-color: var(--primary); }
.otlob-page .hcs-dots { gap: 6px; display: flex; }
.otlob-page .hcs-dot { cursor: pointer; background: rgb(203, 213, 225); border: 0px; border-radius: 999px; width: 9px; height: 9px; padding: 0px; }
.otlob-page .hcs-dot.active { background: var(--primary); width: 22px; }
@media (width <= 640px) {
  .otlob-page .store-grid, .otlob-page .cat-grid, .otlob-page .offers-grid, .otlob-page .dir-grid, .otlob-page .season-deals, .otlob-page .store-offer-grid, .otlob-page .coupon-list { grid-template-columns: repeat(2, minmax(0px, 1fr)); align-items: stretch; gap: 10px; }
  .otlob-page .store-grid > *, .otlob-page .coupon-list > li, .otlob-page .offers-grid > *, .otlob-page .dir-grid > * { height: 100%; }
  .otlob-page .store-card, .otlob-page .cat-card, .otlob-page .dir-card, .otlob-page .offer-card { overflow-wrap: anywhere; height: 100%; padding: 12px; }
  .otlob-page .store-logo { width: 52px; height: 52px; font-size: 15px; }
  .otlob-page .store-card h3 { font-size: 14px; }
  .otlob-page .store-stats, .otlob-page .store-rating, .otlob-page .store-best { font-size: 11.5px; }
  .otlob-page .store-cta { padding: 8px 10px; font-size: 13px; }
  .otlob-page .coupon-card { grid-template-columns: 1fr; align-content: start; gap: 8px; height: 100%; padding: 12px; }
  .otlob-page .coupon-card .c-logo { width: 40px; height: 40px; font-size: 12px; }
  .otlob-page .coupon-body h3 { font-size: 14px; }
  .otlob-page .coupon-meta { gap: 6px; font-size: 11.5px; }
  .otlob-page .coupon-actions { flex-direction: column; align-self: end; width: 100%; min-width: 0px; }
  .otlob-page .code-display { letter-spacing: 1px; min-width: 0px; padding: 8px; font-size: 13px; }
  .otlob-page .btn-reveal { width: 100%; min-width: 0px; min-height: 44px; padding: 10px 8px; font-size: 13px; }
  .otlob-page .offer-card { gap: 8px; }
  .otlob-page .offer-title { font-size: 14px; }
  .otlob-page .offer-desc { font-size: 12.5px; }
  .otlob-page .offer-cta { padding: 10px 8px; font-size: 13px; }
  .otlob-page .offer-store img, .otlob-page .offer-store-fallback { width: 32px; height: 32px; }
  .otlob-page .offer-store-name { font-size: 13px; }
  .otlob-page .offer-value { padding: 3px 8px; font-size: 11.5px; }
  .otlob-page .season-deal { padding: 12px; }
  .otlob-page .sd-title { font-size: 14px; }
}
@media (width <= 360px) {
  .otlob-page .store-card, .otlob-page .cat-card, .otlob-page .coupon-card, .otlob-page .offer-card, .otlob-page .dir-card { padding: 10px; }
  .otlob-page .store-card h3, .otlob-page .coupon-body h3, .otlob-page .offer-title { font-size: 13px; }
  .otlob-page .btn-reveal, .otlob-page .offer-cta { font-size: 12px; }
  .otlob-page .offer-card-head { flex-direction: column; align-items: flex-start; }
}
.otlob-page .cat-hero-row { flex-wrap: wrap; align-items: center; gap: 14px; display: flex; }
.otlob-page .cat-hero-icon { font-size: 40px; line-height: 1; }
.otlob-page .cat-hero-image { object-fit: cover; border-radius: 16px; width: 72px; height: 72px; }
.otlob-page .cat-filters { flex-direction: column; gap: 12px; margin: 4px 0px 18px; display: flex; }
.otlob-page .cat-filter-title { color: rgb(15, 23, 42); margin-bottom: 8px; font-size: 14px; font-weight: 800; display: block; }
.otlob-page .cat-filter-chips { flex-wrap: wrap; gap: 8px; display: flex; }
.otlob-page .cat-chip { color: rgb(15, 23, 42); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; cursor: pointer; background: rgb(255, 255, 255); border: 1px solid rgb(216, 222, 231); border-radius: 999px; min-height: 40px; padding: 8px 16px; font-size: 14px; font-weight: 700; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.otlob-page .cat-chip:hover { border-color: var(--primary, #0f766e); }
.otlob-page .cat-chip.active { background: var(--primary, #0f766e); border-color: var(--primary, #0f766e); color: rgb(255, 255, 255); }
.otlob-page .cat-chip.reset { color: rgb(255, 107, 53); border-color: rgb(255, 211, 194); align-self: flex-start; }
.otlob-page .cat-result-bar { flex-wrap: wrap; align-items: center; gap: 14px; display: flex; }
.otlob-page .cat-sort { align-items: center; gap: 8px; font-size: 14px; font-weight: 700; display: inline-flex; }
.otlob-page .cat-sort select { font: inherit; background: rgb(255, 255, 255); border: 1px solid rgb(216, 222, 231); border-radius: 10px; padding: 8px 12px; }
.otlob-page .cat-store-summary { color: rgb(71, 85, 105); margin: 0px; font-size: 13px; line-height: 1.8; }
.otlob-page .cat-store-badges { flex-wrap: wrap; gap: 6px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .cat-store-badges li { color: rgb(15, 23, 42); background: rgb(241, 245, 249); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 800; }
.otlob-page .cat-discovery { flex-wrap: wrap; gap: 8px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .cat-guide { color: rgb(51, 65, 85); gap: 8px; margin: 0px; padding-inline-start: 20px; font-size: 15px; line-height: 1.9; display: grid; }
@media (width <= 640px) {
  .otlob-page.cat-page .dir-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; }
  .otlob-page.cat-page .store-card-top { text-align: center; grid-template-columns: 1fr; justify-items: center; }
  .otlob-page.cat-page .cat-store-badges { justify-content: center; }
}
.otlob-page .legal-hero { padding-block: 28px; }
.otlob-page .legal-layout { grid-template-columns: 260px minmax(0px, 1fr); align-items: start; gap: 24px; padding-block: 28px; display: grid; }
.otlob-page.legal-page .legal-layout:has(> .legal-content:only-child) { grid-template-columns: minmax(0px, 1fr); max-width: 860px; }
.otlob-page .legal-toc { background: rgb(255, 255, 255); border: 1px solid rgb(231, 236, 243); border-radius: 16px; padding: 16px; position: sticky; top: 16px; }
.otlob-page .legal-toc h2 { margin: 0px 0px 10px; font-size: 16px; }
.otlob-page .legal-toc ol { gap: 6px; margin: 0px; padding-inline-start: 20px; font-size: 14px; display: grid; }
.otlob-page .legal-toc a { color: rgb(51, 65, 85); }
.otlob-page .legal-content { background: rgb(255, 255, 255); border: 1px solid rgb(231, 236, 243); border-radius: 18px; gap: 26px; padding: 22px; display: grid; }
.otlob-page .legal-content h2 { color: rgb(15, 23, 42); margin: 0px 0px 10px; scroll-margin-top: 90px; font-size: clamp(19px, 2.4vw, 23px); }
.otlob-page .legal-content h3 { color: rgb(15, 23, 42); margin: 16px 0px 8px; font-size: 17px; }
.otlob-page .legal-content p { color: rgb(51, 65, 85); margin: 0px 0px 10px; font-size: 15.5px; line-height: 1.95; }
.otlob-page .legal-list { color: rgb(51, 65, 85); gap: 6px; margin: 0px 0px 10px; padding-inline-start: 20px; font-size: 15px; line-height: 1.9; display: grid; }
.otlob-page .legal-updated { color: rgb(100, 116, 139); font-size: 14px; font-weight: 700; }
.otlob-page .legal-table-wrap { overflow-x: auto; }
.otlob-page .legal-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.otlob-page .legal-table caption { text-align: start; color: rgb(100, 116, 139); padding-bottom: 8px; font-size: 13px; }
.otlob-page .legal-table th, .otlob-page .legal-table td { text-align: start; vertical-align: top; border: 1px solid rgb(231, 236, 243); padding: 8px 10px; }
.otlob-page .legal-table th { color: rgb(15, 23, 42); background: rgb(248, 250, 252); font-weight: 800; }
.otlob-page .legal-form { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px; display: grid; }
.otlob-page .lf-field { flex-direction: column; gap: 6px; min-height: 96px; display: flex; }
.otlob-page .lf-full { grid-column: 1 / -1; }
.otlob-page .lf-field label { color: rgb(15, 23, 42); font-size: 14px; font-weight: 800; }
.otlob-page .lf-field input, .otlob-page .lf-field select, .otlob-page .lf-field textarea { font: inherit; background: rgb(255, 255, 255); border: 1px solid rgb(216, 222, 231); border-radius: 10px; width: 100%; min-height: 44px; padding: 10px 12px; }
.otlob-page .lf-field :is(input, .otlob-page select, .otlob-page textarea):focus-visible { outline-offset: 2px; outline: rgb(255, 107, 53) solid 2px; }
.otlob-page .lf-help { color: rgb(100, 116, 139); font-size: 12.5px; line-height: 1.7; }
.otlob-page .lf-error { color: rgb(185, 28, 28); min-height: 18px; font-size: 12.5px; font-weight: 800; }
.otlob-page .lf-consent { gap: 10px; min-height: auto; }
.otlob-page .lf-check { align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.8; display: flex; }
.otlob-page .lf-check input { flex: 0 0 auto; width: 18px; height: 18px; min-height: 18px; margin-top: 3px; }
.otlob-page .lf-hp { clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; width: 1px; height: 1px; position: absolute; overflow: hidden; }
.otlob-page .lf-actions { grid-column: 1 / -1; }
.otlob-page .lf-submit, .otlob-page .lf-link-btn { color: rgb(255, 255, 255); background: rgb(255, 107, 53); border: none; border-radius: 12px; min-height: 48px; padding: 12px 22px; font-size: 15px; font-weight: 800; text-decoration: none; display: inline-block; }
.otlob-page .lf-submit[disabled] { opacity: 0.6; cursor: progress; }
.otlob-page .lf-secondary { background: rgb(15, 118, 110); }
.otlob-page .lf-status { grid-column: 1 / -1; min-height: 24px; margin: 0px; font-size: 14.5px; font-weight: 800; }
.otlob-page .lf-status.ok { color: rgb(21, 128, 61); }
.otlob-page .lf-status.bad { color: rgb(185, 28, 28); }
@media (width <= 900px) {
  .otlob-page .legal-layout { grid-template-columns: minmax(0px, 1fr); }
  .otlob-page .legal-toc { position: static; }
  .otlob-page .legal-form { grid-template-columns: minmax(0px, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .otlob-page .skip-link { transition: none; }
}
.otlob-page .store-state { padding: 24px 0px 48px; }
.otlob-page .store-state-hero { text-align: center; max-width: 640px; margin: 0px auto; padding: 28px 18px 8px; }
.otlob-page .store-state-art { width: 120px; height: 96px; color: var(--brand, #0fb9b1); margin: 0px auto 14px; display: block; }
.otlob-page .store-state-hero h1 { margin: 0px 0px 10px; font-size: clamp(22px, 4.4vw, 30px); line-height: 1.4; }
.otlob-page .store-state-body { color: rgb(91, 107, 115); margin: 0px auto 18px; line-height: 1.9; }
.otlob-page .store-state-actions { flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; display: flex; }
.otlob-page .store-state-actions .btn-primary { background: var(--primary); color: rgb(255, 255, 255); border-radius: 12px; justify-content: center; align-items: center; min-height: 46px; padding: 12px 22px; font-weight: 800; display: inline-flex; }
.otlob-page .store-state-actions .btn-primary:hover { background: var(--primary-dark); color: rgb(255, 255, 255); text-decoration: none; }
.otlob-page .store-state-actions .btn-secondary { background: var(--surface); border: 1px solid var(--border); min-height: 46px; color: var(--text); border-radius: 12px; justify-content: center; align-items: center; padding: 12px 22px; font-weight: 800; display: inline-flex; }
.otlob-page .store-state-actions .btn-secondary:hover { border-color: var(--primary); text-decoration: none; }
.otlob-page .store-state-contact { text-align: center; margin: 22px 0px 0px; }
.otlob-page .store-lookup { text-align: right; max-width: 460px; margin: 0px auto; }
.otlob-page .store-lookup input[type="search"] { width: 100%; font: inherit; background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 236); border-radius: 14px; padding: 12px 16px; }
.otlob-page .store-lookup-results { min-height: 24px; }
.otlob-page .store-lookup-results ul { gap: 4px; margin: 8px 0px 0px; padding: 0px; list-style: none; display: grid; }
.otlob-page .store-lookup-results a { background: rgb(244, 248, 249); border-radius: 12px; padding: 10px 14px; display: block; }
.otlob-page .store-lookup-empty { color: rgb(123, 138, 145); margin: 8px 0px 0px; font-size: 14px; }
.otlob-page .store-state-section { margin-top: 34px; }
.otlob-page .mini-store-card { flex-direction: column; gap: 8px; display: flex; }
.otlob-page .mini-store-desc { color: rgb(107, 122, 129); margin: 0px; font-size: 14px; line-height: 1.7; }
.otlob-page .store-hero-band { padding: 26px 0px 24px; }
.otlob-page .store-hero { align-items: flex-start; gap: 18px; margin-top: 10px; display: flex; }
.otlob-page .store-hero-logo { border: 1px solid var(--border); width: 88px; height: 88px; box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); border-radius: 20px; flex: 0 0 88px; place-items: center; display: grid; overflow: hidden; }
.otlob-page .store-hero-logo img { object-fit: contain; width: 64px; height: 64px; }
.otlob-page .store-hero h1 { color: var(--text); margin: 0px 0px 8px; font-size: clamp(22px, 3.2vw, 34px); font-weight: 900; line-height: 1.35; }
.otlob-page .store-hero-desc { margin: 0px 0px 12px; }
.otlob-page .store-hero-meta > li a { color: var(--primary-dark); font-weight: 800; }
.otlob-page .store-empty-note { border: 1px dashed var(--accent); color: var(--text); background: rgba(255, 107, 53, 0.06); border-radius: 16px; padding: 18px; font-weight: 600; }
.otlob-page .store-empty-note p { margin: 0px; line-height: 1.9; }
@media (width <= 640px) {
  .otlob-page .store-hero { gap: 12px; }
  .otlob-page .store-hero-logo { border-radius: 14px; flex-basis: 64px; width: 64px; height: 64px; }
  .otlob-page .store-hero-logo img { width: 46px; height: 46px; }
  .otlob-page .store-state-hero { padding-top: 18px; }
  .otlob-page .store-state-art { width: 96px; height: 78px; }
  .otlob-page .store-state-actions .btn-primary, .otlob-page .store-state-actions .btn-secondary { text-align: center; flex: 1 1 100%; }
}
.otlob-page .store-hero-en { color: var(--muted); margin: 0px 0px 6px; font-size: 14px; font-weight: 700; }
.otlob-page .store-hero-team { color: var(--muted); margin: 10px 0px 0px; font-size: 13px; }
.otlob-page .store-hero-team a { color: var(--primary-dark); font-weight: 800; }
.otlob-page .store-country-area { margin-top: 10px; }
.otlob-page .store-country-intro { color: var(--text); border-inline-start: 4px solid var(--primary); box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); border-radius: 14px; margin: 16px 0px 0px; padding: 12px 14px; font-weight: 600; line-height: 1.95; }
.otlob-page .store-summary { flex-wrap: wrap; gap: 10px; margin: 14px 0px 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .store-summary li { border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom: 3px solid var(--primary); color: var(--text); box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; font-weight: 700; }
.otlob-page .store-summary li strong { color: var(--primary-dark); font-size: 17px; font-weight: 900; }
.otlob-page .store-section { margin-top: 30px; }
.otlob-page .store-section > .section-title { color: var(--text); align-items: center; gap: 10px; margin: 0px 0px 14px; font-size: clamp(17px, 3vw, 21px); font-weight: 900; display: flex; }
.otlob-page .store-section > .section-title::before { content: ""; background: linear-gradient(180deg, var(--primary), var(--accent)); border-radius: 999px; flex: 0 0 auto; width: 6px; height: 22px; }
.otlob-page .coupon-list-v2 { gap: 14px; display: grid; }
.otlob-page .coupon-card-v2 { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: 18px; gap: 12px; padding: 16px; transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s; display: grid; }
.otlob-page .coupon-card-v2:hover { box-shadow: var(--shadow); border-color: var(--primary); transform: translateY(-2px); }
.otlob-page .coupon-card-v2.featured { border: 2px solid var(--primary); box-shadow: var(--shadow); background: linear-gradient(rgba(32, 191, 239, 0.07), rgb(255, 255, 255) 55%); }
.otlob-page .coupon-card-body { flex-wrap: wrap; align-items: flex-start; gap: 16px; display: flex; }
.otlob-page .coupon-card-main { flex: 1 1 240px; min-width: 0px; }
.otlob-page .coupon-value { color: rgb(255, 255, 255); background: linear-gradient(135deg, var(--accent), #ff8f4c); border-radius: 999px; margin-bottom: 8px; padding: 6px 14px; font-size: 15px; font-weight: 900; display: inline-block; box-shadow: rgba(255, 107, 53, 0.28) 0px 4px 12px; }
.otlob-page .coupon-title { color: var(--text); margin: 0px 0px 6px; font-size: 16.5px; font-weight: 800; line-height: 1.6; }
.otlob-page .coupon-desc { color: var(--muted); margin: 0px 0px 10px; font-size: 14px; line-height: 1.8; }
.otlob-page .coupon-facts { color: var(--text); flex-wrap: wrap; gap: 8px; margin: 0px 0px 10px; padding: 0px; font-size: 12.5px; list-style: none; display: flex; }
.otlob-page .coupon-facts li { background: rgb(238, 246, 250); border: 1px solid rgb(220, 235, 243); border-radius: 999px; padding: 4px 11px; font-weight: 700; }
.otlob-page .coupon-verify { color: rgb(6, 122, 85); background: rgba(16, 185, 129, 0.12); border-radius: 999px; align-items: center; gap: 6px; margin: 0px; padding: 5px 12px; font-size: 12.5px; font-weight: 800; display: inline-flex; }
.otlob-page .coupon-verify::before { content: "✓"; font-weight: 900; }
.otlob-page .coupon-verify.status-user_reported { color: rgb(146, 97, 10); background: rgba(255, 201, 60, 0.2); }
.otlob-page .coupon-verify.status-not_verified_recently { color: var(--muted); background: rgb(241, 245, 249); }
.otlob-page .coupon-verify.status-not_verified_recently::before { content: "•"; }
.otlob-page .coupon-source { opacity: 0.8; font-weight: 600; }
.otlob-page .coupon-card-actions { flex-direction: column; align-items: stretch; gap: 8px; min-width: 200px; display: flex; }
.otlob-page .coupon-code { border: 2px dashed var(--primary); background: rgb(242, 251, 254); border-radius: 12px; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 8px 12px; transition: background 0.15s, border-color 0.15s; display: flex; }
.otlob-page .coupon-code:hover { background: rgb(230, 247, 254); }
.otlob-page .coupon-code.copied { border-color: var(--success); background: rgba(16, 185, 129, 0.1); }
.otlob-page .coupon-code-value { letter-spacing: 0.08em; color: var(--primary-dark); font-size: 16px; font-weight: 900; }
.otlob-page .coupon-code-hint { color: var(--muted); margin: 0px; font-size: 12px; font-weight: 800; }
.otlob-page .coupon-code.copied .coupon-code-hint { color: var(--success); }
.otlob-page .coupon-link { text-align: center; background: var(--primary); color: rgb(255, 255, 255); border-radius: 12px; justify-content: center; align-items: center; min-height: 46px; padding: 12px 16px; font-weight: 800; display: inline-flex; box-shadow: rgba(32, 191, 239, 0.28) 0px 6px 16px; }
.otlob-page .coupon-link:hover { background: var(--primary-dark); color: rgb(255, 255, 255); text-decoration: none; }
.otlob-page .coupon-report { color: var(--muted); text-align: center; margin: 0px; font-size: 12px; font-weight: 700; }
.otlob-page .coupon-toggle { color: var(--primary-dark); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; cursor: pointer; padding: 0px; font-size: 13px; font-weight: 800; }
.otlob-page .coupon-details-body { color: var(--text); background: rgb(247, 250, 252); border-radius: 12px; margin-top: 8px; padding: 10px 14px; font-size: 13.5px; line-height: 1.9; }
.otlob-page .coupon-details-body ul { margin: 0px; padding-inline-start: 18px; }
.otlob-page .coupon-expired-tag { color: rgb(146, 97, 10); text-align: center; background: rgba(255, 201, 60, 0.22); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 800; }
.otlob-page .store-expired .coupon-card-v2 { opacity: 0.8; background: rgb(251, 252, 253); }
.otlob-page .store-steps, .otlob-page .store-list { color: var(--text); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: 16px; margin: 0px; padding: 16px 34px 16px 16px; line-height: 2; }
.otlob-page .store-steps li::marker { color: var(--primary); font-weight: 900; }
.otlob-page .store-list li::marker { color: var(--primary); font-weight: 900; }
.otlob-page .store-info-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; display: grid; }
.otlob-page .store-info-box { background: var(--surface); border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top: 3px solid var(--primary); box-shadow: var(--shadow-sm); border-radius: 16px; padding: 14px; }
.otlob-page .store-info-box h3 { color: var(--primary-dark); margin: 0px 0px 6px; font-size: 15px; font-weight: 800; }
.otlob-page .store-info-box p { color: var(--muted); margin: 0px; font-size: 14px; line-height: 1.8; }
.otlob-page .store-media-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 12px; display: grid; }
.otlob-page .store-media-card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: 16px; overflow: hidden; }
.otlob-page .store-media-card:hover { box-shadow: var(--shadow); border-color: var(--primary); }
.otlob-page .store-media-thumb { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; display: block; }
.otlob-page .store-media-body { padding: 12px 14px; }
.otlob-page .store-media-body h3 { margin: 0px; font-size: 15px; font-weight: 800; }
.otlob-page .store-media-body p { color: var(--muted); font-size: 13.5px; line-height: 1.8; }
.otlob-page .store-media-meta { color: var(--muted); margin: 6px 0px 0px; font-size: 12px; font-weight: 700; }
.otlob-page .store-media-note { color: rgb(146, 97, 10); background: rgba(255, 201, 60, 0.16); border-radius: 10px; margin: 10px 0px 0px; padding: 8px 10px; font-size: 12.5px; }
.otlob-page .store-faq { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: 16px; padding: 4px 16px; }
.otlob-page .store-faq details { border-bottom: 1px solid var(--border); padding: 12px 0px; }
.otlob-page .store-faq details:last-child { border-bottom: 0px; }
.otlob-page .store-faq summary { cursor: pointer; color: var(--text); font-weight: 800; }
.otlob-page .store-faq p { color: var(--muted); margin: 8px 0px 0px; line-height: 1.9; }
.otlob-page .store-country-area .country-tab.active, .otlob-page .store-country-area .country-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: rgb(255, 255, 255); box-shadow: rgba(32, 191, 239, 0.28) 0px 6px 16px; }
@media (width <= 640px) {
  .otlob-page .store-hero-band { padding: 18px 0px 16px; }
  .otlob-page .coupon-card-actions { min-width: 100%; }
  .otlob-page .coupon-card-v2 { padding: 14px; }
  .otlob-page .coupon-title { font-size: 15px; }
}
.otlob-page .dark { --background: oklch(12.9% .042 264.695); --foreground: oklch(98.4% .003 247.858); --card: oklch(20.8% .042 265.755); --card-foreground: oklch(98.4% .003 247.858); --popover: oklch(20.8% .042 265.755); --popover-foreground: oklch(98.4% .003 247.858); --primary: oklch(92.9% .013 255.508); --primary-foreground: oklch(20.8% .042 265.755); --secondary: oklch(27.9% .041 260.031); --secondary-foreground: oklch(98.4% .003 247.858); --muted: oklch(27.9% .041 260.031); --muted-foreground: oklch(70.4% .04 256.788); --accent: oklch(27.9% .041 260.031); --accent-foreground: oklch(98.4% .003 247.858); --destructive: oklch(70.4% .191 22.216); --destructive-foreground: oklch(98.4% .003 247.858); --border: oklch(100% 0 0 / .1); --input: oklch(100% 0 0 / .15); --ring: oklch(55.1% .027 264.364); --chart-1: oklch(48.8% .243 264.376); --chart-2: oklch(69.6% .17 162.48); --chart-3: oklch(76.9% .188 70.08); --chart-4: oklch(62.7% .265 303.9); --chart-5: oklch(64.5% .246 16.439); --sidebar: oklch(20.8% .042 265.755); --sidebar-foreground: oklch(98.4% .003 247.858); --sidebar-primary: oklch(48.8% .243 264.376); --sidebar-primary-foreground: oklch(98.4% .003 247.858); --sidebar-accent: oklch(27.9% .041 260.031); --sidebar-accent-foreground: oklch(98.4% .003 247.858); --sidebar-border: oklch(100% 0 0 / .1); --sidebar-ring: oklch(55.1% .027 264.364); }
@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-rotate-x { syntax: "*"; inherits: false; }
@property --tw-rotate-y { syntax: "*"; inherits: false; }
@property --tw-rotate-z { syntax: "*"; inherits: false; }
@property --tw-skew-x { syntax: "*"; inherits: false; }
@property --tw-skew-y { syntax: "*"; inherits: false; }
@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-leading { syntax: "*"; inherits: false; }
@property --tw-font-weight { syntax: "*"; inherits: false; }
@property --tw-tracking { syntax: "*"; inherits: false; }
@property --tw-ordinal { syntax: "*"; inherits: false; }
@property --tw-slashed-zero { syntax: "*"; inherits: false; }
@property --tw-numeric-figure { syntax: "*"; inherits: false; }
@property --tw-numeric-spacing { syntax: "*"; inherits: false; }
@property --tw-numeric-fraction { syntax: "*"; inherits: false; }
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-shadow-color { syntax: "*"; inherits: false; }
@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-ring-color { syntax: "*"; inherits: false; }
@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-ring-inset { syntax: "*"; inherits: false; }
@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-blur { syntax: "*"; inherits: false; }
@property --tw-brightness { syntax: "*"; inherits: false; }
@property --tw-contrast { syntax: "*"; inherits: false; }
@property --tw-grayscale { syntax: "*"; inherits: false; }
@property --tw-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-invert { syntax: "*"; inherits: false; }
@property --tw-opacity { syntax: "*"; inherits: false; }
@property --tw-saturate { syntax: "*"; inherits: false; }
@property --tw-sepia { syntax: "*"; inherits: false; }
@property --tw-drop-shadow { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
@property --tw-duration { syntax: "*"; inherits: false; }
@property --tw-ease { syntax: "*"; inherits: false; }
@property --tw-content { syntax: "*"; inherits: false; initial-value: ""; }
@keyframes pulse { 
  50% { opacity: 0.5; }
}
@keyframes enter { 
  0% { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0)); filter: blur(var(--tw-enter-blur, 0)); }
}
@keyframes exit { 
  100% { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0)scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0)); filter: blur(var(--tw-exit-blur, 0)); }
}
@keyframes accordion-down { 
  0% { height: 0px; }
  100% { height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))))); }
}
@keyframes accordion-up { 
  0% { height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))))); }
  100% { height: 0px; }
}
@keyframes caret-blink { 
  0%, 70%, 100% { opacity: 1; }
  20%, 50% { opacity: 0; }
}

/* THE PANELS OF THE COUNTRIES, AND THE PAGES INSIDE ONE OF THEM

   The script hides with the hidden attribute, which the browser honours on its
   own for an element that was given no display of its own. .dir-card was given
   one by the design above, a flex, and that would out-rank the browser's own
   hiding, so the card is told plainly here. The attribute selector is one step
   more specific than the rule it answers, so no !important is wanted.

   Nothing else of the design is touched. A chosen tab is .country-tab.active
   and a chosen page is .page-link.active, both already painted above, and the
   script sets no class the stylesheet did not already carry. */

.otlob-page .cd2-panel[hidden],
.otlob-page .dir-card[hidden],
.otlob-page .dir-pagination[hidden] {
  display: none;
}

.otlob-page .cd2-panel .dir-pagination {
  margin-top: 20px;
}

/* THE PAGE NUMBERS AS BUTTONS

   Turning a page must not write an address of its own and must not follow one,
   so a page number is a button. The design wrote .page-link for an anchor,
   which needs no font because it inherits one; a button does not inherit, so
   the font is handed to it here and nothing else of the rule is touched. The
   colours, the border, the size and both states above stay as they were,
   .page-link.active included. */

.otlob-page .page-link {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.otlob-page button.page-link:disabled {
  cursor: default;
}

/* THE FEW THINGS THIS PAGE ADDS TO THE DESIGN

   Nothing here repaints anything. A chip is still .filter-chip and a chosen one
   is still .filter-chip.active, exactly as the rules above paint them; what is
   said here is only how the list holding them lays out, how the heading above
   that list reads, and where the ordering control sits in the head of a
   section. The chips of the design are buttons and links both, and both need
   the pointer and the plain look a chip has. */

.otlob-page .filter-row > li {
  display: flex;
  flex: 0 0 auto;
  list-style: none;
}

.otlob-page a.filter-chip,
.otlob-page button.filter-chip {
  cursor: pointer;
  text-decoration: none;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.otlob-page .cd2-types-title {
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
}

/* the ordering control keeps to the far end of the head, away from the heading
   and the figure beside it, and drops under them when there is no room */
.otlob-page .section-head .dir-field {
  flex: 0 0 auto;
  margin-inline-start: auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.otlob-page .section-head .dir-field select {
  width: auto;
  min-width: 150px;
}

@media (max-width: 768px) {
  .otlob-page .section-head .dir-field {
    width: 100%;
    margin-inline-start: 0;
  }
  .otlob-page .section-head .dir-field select {
    width: 100%;
  }
}

/* the icon beside the heading of the section keeps to the line of the words */
.otlob-page .dir-hero h1 .category-icon {
  font-size: .9em;
  line-height: 1;
}

/* THE SPACE BETWEEN THE SECTIONS

   The design leaves 48px above every section. On this page the sections are
   short and there are many of them, so that gap is cut to a quarter of itself
   and the page reads as one thing rather than a column of islands. Only the
   space BETWEEN sections is touched; the space inside one, between its head
   and what it holds, is the design's own and is left alone.

   This is the stylesheet of category2 alone, so no other page moves. */

.otlob-page .section {
  margin-top: 12px;
}

.otlob-page .cd2-types-title {
  margin: 6px 0 8px;
}

/* THE TYPES THE OPEN COUNTRY HAS

   The row holds every type of the section, and the script hides the ones the
   open country carries none of, so the row never offers a type that would
   empty the grid under it. */

.otlob-page .filter-row > li[hidden] {
  display: none;
}

/* THE DESCRIPTION OF A SECTION

   Printed as the markup the panel wrote, so the block holds headings, lists
   and bold as well as paragraphs. The first and last things in it lose their
   outer margin, so the block starts and ends where the card expects it to
   whatever the panel happened to begin with. */

.otlob-page .seo-content > :first-child { margin-top: 0; }
.otlob-page .seo-content > :last-child { margin-bottom: 0; }

.otlob-page .seo-content p {
  margin: 0 0 12px;
}

.otlob-page .seo-content h2,
.otlob-page .seo-content h3,
.otlob-page .seo-content h4 {
  margin: 18px 0 8px;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 800;
  line-height: 1.5;
  color: var(--text);
}

.otlob-page .seo-content ul,
.otlob-page .seo-content ol {
  margin: 0 0 12px;
  padding-inline-start: 20px;
  padding-inline-end: 0;
}

.otlob-page .seo-content li {
  margin: 0 0 6px;
  list-style: inherit;
}

.otlob-page .seo-content ul { list-style: disc; }
.otlob-page .seo-content ol { list-style: decimal; }

.otlob-page .seo-content strong,
.otlob-page .seo-content b {
  font-weight: 800;
  color: var(--text);
}

.otlob-page .seo-content a {
  color: var(--primary-dark);
  text-decoration: underline;
}

.otlob-page .seo-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}