/* ============================================================= Stay and Play Plugin — Prayer Theme Tokens Emerald green #1B5E20 · Sacred gold #C8922A · Ivory #FDF8F0 ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap'); :root, .hb-main-container, .snp-booking-page { /* Backgrounds */ --hb-bg1: #FDF8F0; --hb-bg2: #FFFFFF; --hb-card: #FFFFFF; /* Borders */ --hb-border: #DDD5C0; /* Text */ --hb-text: #1A1A2E; --hb-muted: #6B7280; /* Accent — emerald green */ --hb-accent: #1B5E20; --hb-accent2: #2E7D32; --hb-btn-text: #FFFFFF; /* Shape */ --hb-radius: 14px; --hb-radius2: 8px; /* Shadows */ --hb-shadow: 0 4px 24px rgba(27,94,32,.10); --hb-shadow2: 0 2px 12px rgba(27,94,32,.07); /* Font */ --hb-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Prayer-specific extras */ --sap-gold: #C8922A; --sap-gold-light: #E8B84B; --sap-ivory: #FDF8F0; --sap-ivory-dark: #F5EFE0; --sap-green: #1B5E20; } /* Page background */ .snp-booking-page { background: var(--sap-ivory); } .hb-main-container::before { display: none !important; } /* ── Button overrides ── */ .hb-btn-primary, .snp-btn-primary, .snp-extra-select-btn, .snp-pay-now-btn, .snp-btn-split-continue:not(:disabled) { background: var(--sap-green) !important; border-color: var(--sap-green) !important; color: #fff !important; } .hb-btn-primary:hover, .snp-btn-primary:hover, .snp-extra-select-btn:hover { background: #2E7D32 !important; border-color: #2E7D32 !important; } .snp-btn-primary-gold { background: var(--sap-gold) !important; border-color: var(--sap-gold) !important; color: var(--hb-text) !important; } .snp-btn-primary-gold:hover { background: #A07020 !important; border-color: #A07020 !important; color: #fff !important; } .snp-btn-outline-red { border-color: var(--sap-green) !important; color: var(--sap-green) !important; } .snp-btn-outline-red:hover { background: var(--sap-green) !important; color: #fff !important; } /* ── Step numbers / badges ── */ .hb-step-number, .hb-account-badge, .snp-step-num { background: var(--sap-green) !important; } .snp-step-active .snp-step-icon, .snp-step-done .snp-step-icon { background: var(--sap-green) !important; border-color: var(--sap-green) !important; } /* ── Price colors ── */ .hb-card-price, .snp-extra-card-price, .snp-room-price-amount, .snp-text-red, .snp-pay-amount { color: var(--sap-green) !important; } /* ── Active/selected states ── */ .snp-extra-card.is-selected { border-color: var(--sap-green) !important; } .snp-pay-option.is-selected { border-color: var(--sap-green) !important; } .snp-pay-option.is-selected .snp-pay-option-radio { border-color: var(--sap-green) !important; } .snp-pay-option.is-selected .snp-pay-option-radio::after { background: var(--sap-green) !important; } /* ── Tabs ── */ .snp-pay-tab.active, .snp-hero-tab.active { color: var(--sap-green) !important; border-bottom-color: var(--sap-green) !important; } .snp-pay-tab.active, .snp-hero-tab.active { color: var(--sap-green) !important; } /* ── Links / sidebar accents ── */ .snp-sidebar-more, .snp-coupon-toggle, .snp-back-link:hover { color: var(--sap-green) !important; } .snp-sidebar-row-icon { color: var(--sap-green) !important; } .snp-crew-room-header { color: var(--sap-green) !important; } .snp-add-room-plus { background: var(--sap-green) !important; } .snp-crew-guest-expand-btn { background: var(--sap-green) !important; } .snp-crew-remove { color: var(--sap-green) !important; } /* ── Option cards hover ── */ .snp-option-card:hover { border-color: var(--sap-green) !important; box-shadow: 0 4px 16px rgba(27,94,32,.12) !important; } /* ── Sticky bar border ── */ .snp-sticky-bar { border-top-color: var(--sap-gold) !important; } /* ── Date input focus ── */ .snp-date-select:focus, .snp-date-input:focus, .snp-input:focus { border-color: var(--sap-green) !important; } /* ── Headings use Amiri for Islamic feel ── */ .snp-event-title, .snp-section-title, .snp-step-heading h2, .snp-trip-title, .snp-form-section-title { font-family: 'Amiri', Georgia, serif !important; } /* ── Hero date pill ── */ .snp-hero-date-pill { border-top: 3px solid var(--sap-gold) !important; } /* ── Gold included badges ── */ .snp-included-badge { background: #FFF8E7 !important; color: var(--sap-gold-dark, #A07020) !important; border-color: #F0D090 !important; } .snp-included-badge svg { stroke: var(--sap-gold, #C8922A) !important; color: var(--sap-gold, #C8922A) !important; } /* ── Prayer-specific decorative heading band ── */ .snp-prayer-heading-band { background: linear-gradient(135deg, var(--sap-green) 0%, #2E7D32 100%); color: #fff; padding: 14px 20px; display: flex; align-items: center; gap: 12px; border-radius: var(--hb-radius2) var(--hb-radius2) 0 0; position: relative; overflow: hidden; } .snp-prayer-heading-band::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpolygon points='20,2 23,13 34,13 25,19.6 28.5,30 20,23.8 11.5,30 15,19.6 6,13 17,13' fill='none' stroke='rgba(200,146,42,0.15)' stroke-width='0.8'/%3E%3C/svg%3E"); background-size: 40px 40px; } .snp-prayer-heading-band > * { position: relative; z-index: 1; } .snp-prayer-heading-band h2, .snp-prayer-heading-band h3 { font-family: 'Amiri', serif; font-size: 20px; color: #fff; margin: 0; } .snp-prayer-heading-band .snp-prayer-arabic { font-family: 'Amiri', serif; font-size: 18px; color: var(--sap-gold-light, #E8B84B); margin-left: auto; direction: rtl; } /* ── Sidebar card header gold stripe ── */ .snp-sidebar-card-title { border-left: 3px solid var(--sap-gold) !important; } /* ── Step bar done color ── */ .snp-step-done { color: var(--sap-green) !important; } .snp-step-line { background: var(--sap-ivory-dark, #F5EFE0) !important; }