/* ============================================================
   SHARED SUB-PAGE STYLES
   ============================================================ */

/* Page hero banner */
.page-hero { background-color: #0D1F0A; border-bottom: 2px solid #C9A84C; padding: 32px 16px 28px; }
.page-hero .page-breadcrumb { font-size: 12px; color: #666666; margin-bottom: 12px; max-width: 1200px; margin-left: auto; margin-right: auto; }
.page-hero .page-breadcrumb a { color: #C9A84C; text-decoration: none; }
.page-hero .page-breadcrumb a:hover { text-decoration: underline; }
.page-hero .page-breadcrumb .bc-sep { margin: 0 6px; color: #444444; }
.page-hero .page-title { font-size: 26px; font-weight: 900; color: #FFFFFF; line-height: 1.2; margin-bottom: 8px; max-width: 1200px; margin-left: auto; margin-right: auto; }
.page-hero .page-subtitle { font-size: 14px; color: #888888; line-height: 1.55; max-width: 640px; margin-left: auto; margin-right: auto; }

@media (min-width: 768px) {
  .page-hero .page-title { font-size: 34px; }
}

/* Generic content sections */
.content-section { padding: 44px 16px; border-bottom: 1px solid #E0E0E0; max-width: 1200px; margin-left: auto; margin-right: auto; }
.content-section:last-of-type { border-bottom: none; }
.content-section .content-title { font-size: 20px; font-weight: 800; color: #1A1A1A; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #C9A84C; display: inline-block; }
.content-section .content-subtitle { font-size: 16px; font-weight: 700; color: #1A1A1A; margin: 20px 0 8px; }
.content-section .content-prose p { font-size: 15px; color: #444444; line-height: 1.75; margin-bottom: 14px; }
.content-section .content-prose p:last-child { margin-bottom: 0; }
.content-section .content-prose ul, .content-section .content-prose ol { padding-left: 20px; margin-bottom: 14px; }
.content-section .content-prose li { font-size: 15px; color: #444444; line-height: 1.7; margin-bottom: 6px; }
.content-section .content-prose a { color: #C9A84C; }
.content-section .content-prose a:hover { text-decoration: underline; }

/* Callout / tip box */
.callout-box { background-color: #FDF9EE; border: 1px solid #E8D99A; border-left: 4px solid #C9A84C; border-radius: 4px; padding: 16px 20px; margin: 20px 0; }
.callout-box p { font-size: 14px; color: #444444; line-height: 1.65; margin: 0; }
.callout-box p strong { color: #1A1A1A; }

/* Dark callout */
.callout-dark { background-color: #0D1F0A; border-radius: 8px; padding: 24px 28px; margin: 24px 0; }
.callout-dark .callout-title { font-size: 15px; font-weight: 800; color: #C9A84C; margin-bottom: 8px; }
.callout-dark .callout-body { font-size: 14px; color: #AAAAAA; line-height: 1.65; margin: 0; }
.callout-dark .callout-body a { color: #C9A84C; }

/* ---- Guide steps ---- */
.guide-steps { display: flex; flex-direction: column; }
.guide-step { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid #F0F0F0; }
.guide-step:last-child { border-bottom: none; }
.guide-step .step-badge { flex-shrink: 0; width: 44px; height: 44px; background-color: #C9A84C; color: #FFFFFF; font-size: 20px; font-weight: 900; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.guide-step .step-content { flex: 1; min-width: 0; }
.guide-step .step-title { font-size: 17px; font-weight: 800; color: #1A1A1A; margin-bottom: 8px; }
.guide-step .step-body { font-size: 15px; color: #444444; line-height: 1.7; }
.guide-step .step-body ul { padding-left: 18px; margin-top: 8px; }
.guide-step .step-body li { margin-bottom: 5px; }
.guide-step .step-tip { margin-top: 10px; background-color: #FDF9EE; border-left: 3px solid #C9A84C; padding: 10px 14px; border-radius: 0 4px 4px 0; font-size: 13px; color: #555555; line-height: 1.6; }
.guide-step .step-tip strong { color: #1A1A1A; }

/* ---- Info cards (bet types, tips) ---- */
.info-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.info-card { background-color: #FFFFFF; border: 1px solid #E0E0E0; border-top: 3px solid #C9A84C; border-radius: 6px; padding: 20px; }
.info-card .info-card-title { font-size: 15px; font-weight: 700; color: #1A1A1A; margin-bottom: 8px; }
.info-card .info-card-body { font-size: 14px; color: #555555; line-height: 1.65; }
.info-card .info-card-body ul { padding-left: 16px; margin-top: 6px; }
.info-card .info-card-body li { margin-bottom: 4px; }

@media (min-width: 600px) { .info-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .info-cards { grid-template-columns: repeat(3, 1fr); } }

/* ---- Promo cards ---- */
.promo-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.promo-card { background-color: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 8px; overflow: hidden; }
.promo-card .promo-card-top { background-color: #0D1F0A; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.promo-card .promo-brand { font-size: 17px; font-weight: 900; color: #C9A84C; }
.promo-card .promo-badge { font-size: 10px; font-weight: 700; color: #0D1F0A; background-color: #C9A84C; padding: 3px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }

/* Per-brand promo card header colours */
.promo-card .promo-card-top.brand-888sport  { background-color: #1A1A1A; }
.promo-card .promo-card-top.brand-888sport .promo-brand { color: #FF9900; }
.promo-card .promo-card-top.brand-leovegas  { background: linear-gradient(120deg, #C83E00 0%, #E85000 60%, #FF6820 100%); }
.promo-card .promo-card-top.brand-leovegas .promo-brand { color: #FFFFFF; }
.promo-card .promo-card-top.brand-leovegas .promo-badge { background-color: #FFFFFF; color: #E85000; }
.promo-card .promo-card-top.brand-betway    { background: linear-gradient(120deg, #002422 0%, #00302E 60%, #004D48 100%); }
.promo-card .promo-card-top.brand-betway .promo-brand { color: #00E6CA; }
.promo-card .promo-card-top.brand-tooniebet { background: linear-gradient(120deg, #3D0F72 0%, #5B1F9F 60%, #7B35C8 100%); }
.promo-card .promo-card-top.brand-tooniebet .promo-brand { color: #FFFFFF; }
.promo-card .promo-card-top.brand-tonybet   { background: linear-gradient(120deg, #10132A 0%, #1B1F3B 60%, #2A3060 100%); }
.promo-card .promo-card-top.brand-tonybet .promo-brand { color: #FF6B6B; }
.promo-card .promo-card-top.brand-caesars   { background: linear-gradient(120deg, #0F0F3D 0%, #1A1A5E 60%, #252590 100%); }
.promo-card .promo-card-top.brand-caesars .promo-brand { color: #D4AF37; }
.promo-card .promo-card-top.brand-northstar { background: linear-gradient(120deg, #060E1A 0%, #0A1628 60%, #142340 100%); }
.promo-card .promo-card-top.brand-northstar .promo-brand { color: #E8C84B; }
.promo-card .promo-card-body { padding: 16px 20px; }
.promo-card .promo-offer { font-size: 20px; font-weight: 900; color: #1A1A1A; margin-bottom: 4px; line-height: 1.2; }
.promo-card .promo-desc { font-size: 13px; color: #666666; line-height: 1.5; margin-bottom: 12px; }
.promo-card .promo-code-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.promo-card .promo-code-label { font-size: 12px; font-weight: 700; color: #666666; text-transform: uppercase; letter-spacing: 0.4px; }
.promo-card .promo-hook { font-size: 12px; font-weight: 700; color: #1D7A3A; background-color: #EEF8F1; border-left: 3px solid #1D7A3A; padding: 7px 10px 7px 30px; border-radius: 0 4px 4px 0; margin-bottom: 12px; line-height: 1.45; position: relative; }
.promo-card .promo-hook::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%231D7A3A'/%3E%3Cpath d='M3.5 7l2.5 2.5 4.5-5' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 14px 14px; }
.promo-card .promo-terms { font-size: 11px; color: #999999; line-height: 1.5; margin-top: 8px; }
.promo-card .promo-cta-wrap { display: block; }
.promo-card .promo-cta { display: block; text-align: center; background-color: #C9A84C; color: #0D1F0A; font-size: 14px; font-weight: 800; padding: 11px 16px; border-radius: 5px; text-decoration: none; transition: background-color 0.15s ease; }
.promo-card .promo-cta:hover { background-color: #A8882A; color: #0D1F0A; text-decoration: none; }

@media (min-width: 768px) { .promo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .promo-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Contact form ---- */
.contact-layout { display: grid; grid-template-columns: 1fr; gap: 40px; }
.contact-form .form-group { margin-bottom: 20px; }
.contact-form .form-label { display: block; font-size: 13px; font-weight: 700; color: #1A1A1A; margin-bottom: 6px; }
.contact-form .form-input { display: block; width: 100%; padding: 11px 14px; font-size: 15px; color: #1A1A1A; background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 5px; outline: none; font-family: inherit; box-sizing: border-box; transition: border-color 0.15s ease; }
.contact-form .form-input:focus { border-color: #C9A84C; box-shadow: 0 0 0 3px rgba(201,168,76,0.15); }
.contact-form .form-textarea { resize: vertical; min-height: 130px; }
.contact-form .form-submit { display: inline-block; background-color: #C9A84C; color: #0D1F0A; font-size: 15px; font-weight: 800; padding: 12px 28px; border-radius: 5px; border: none; cursor: pointer; font-family: inherit; transition: background-color 0.15s ease; }
.contact-form .form-submit:hover { background-color: #A8882A; }
.contact-info-cards { display: flex; flex-direction: column; gap: 16px; }
.contact-info-card { display: flex; gap: 14px; align-items: flex-start; background-color: #FAFAFA; border: 1px solid #E0E0E0; border-radius: 8px; padding: 18px 20px; }
.contact-info-card .ci-icon { flex-shrink: 0; width: 36px; height: 36px; background-color: #0D1F0A; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.contact-info-card .ci-title { font-size: 13px; font-weight: 700; color: #1A1A1A; margin-bottom: 3px; }
.contact-info-card .ci-value { font-size: 14px; color: #444444; }

@media (min-width: 768px) {
  .contact-layout { grid-template-columns: 1fr 320px; }
}

/* ---- Team cards ---- */
.team-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.team-card { background-color: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 8px; padding: 24px 20px; display: flex; gap: 16px; align-items: flex-start; }
.team-card .team-avatar { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background-color: #0D1F0A; display: flex; align-items: center; justify-content: center; }
.team-card .team-initials { font-size: 18px; font-weight: 900; color: #C9A84C; }
.team-card .team-info { flex: 1; }
.team-card .team-name { font-size: 15px; font-weight: 700; color: #1A1A1A; margin-bottom: 2px; }
.team-card .team-role { font-size: 12px; font-weight: 700; color: #C9A84C; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.team-card .team-bio { font-size: 14px; color: #555555; line-height: 1.6; }

@media (min-width: 600px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Values / criteria grid ---- */
.values-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.value-card { background-color: #FAFAFA; border: 1px solid #E0E0E0; border-radius: 8px; padding: 20px; }
.value-card .value-icon { margin-bottom: 12px; }
.value-card .value-title { font-size: 15px; font-weight: 700; color: #1A1A1A; margin-bottom: 6px; }
.value-card .value-desc { font-size: 14px; color: #555555; line-height: 1.6; }

@media (min-width: 600px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Responsible gambling resources ---- */
.rg-resources { display: grid; grid-template-columns: 1fr; gap: 16px; }
.rg-card { background-color: #FFFFFF; border: 1px solid #E0E0E0; border-left: 4px solid #C9A84C; border-radius: 4px; padding: 20px; }
.rg-card .rg-card-name { font-size: 15px; font-weight: 800; color: #1A1A1A; margin-bottom: 3px; }
.rg-card .rg-card-type { font-size: 11px; font-weight: 700; color: #C9A84C; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.rg-card .rg-card-desc { font-size: 14px; color: #444444; line-height: 1.6; margin-bottom: 10px; }
.rg-card .rg-card-contact { font-size: 13px; font-weight: 700; color: #1A1A1A; }

@media (min-width: 768px) { .rg-resources { grid-template-columns: repeat(2, 1fr); } }

/* Warning / alert box */
.alert-box { background-color: #FFF8F0; border: 1px solid #F5D0A0; border-left: 4px solid #E07A00; border-radius: 4px; padding: 16px 20px; margin-bottom: 24px; }
.alert-box p { font-size: 14px; color: #444444; line-height: 1.65; margin: 0; }
.alert-box p strong { color: #1A1A1A; }

/* ---- Legal page layout ---- */
.legal-toc { background-color: #FAFAFA; border: 1px solid #E0E0E0; border-radius: 8px; padding: 20px 24px; margin-bottom: 36px; }
.legal-toc .toc-title { font-size: 13px; font-weight: 700; color: #1A1A1A; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.legal-toc ol { padding-left: 18px; }
.legal-toc ol li { font-size: 14px; color: #444444; margin-bottom: 5px; line-height: 1.5; }
.legal-toc ol li a { color: #C9A84C; text-decoration: none; }
.legal-toc ol li a:hover { text-decoration: underline; }
.legal-effective { font-size: 13px; color: #888888; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #F0F0F0; }
.legal-section { margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1px solid #F0F0F0; }
.legal-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.legal-section .legal-section-title { font-size: 18px; font-weight: 800; color: #1A1A1A; margin-bottom: 14px; }
.legal-section p { font-size: 14px; color: #444444; line-height: 1.75; margin-bottom: 12px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul, .legal-section ol { padding-left: 20px; margin-bottom: 12px; }
.legal-section li { font-size: 14px; color: #444444; line-height: 1.7; margin-bottom: 6px; }
.legal-section h3 { font-size: 15px; font-weight: 700; color: #1A1A1A; margin: 18px 0 8px; }