/* ========================================= OFFER DETAIL PAGE  —  offer-detail.css ========================================= */ :root { --od-cyan: #29c3d4; --od-dark: #1a1a1a; --od-text: #444; --od-bg: #f5f5f5; --od-border: #e5e9f0; --od-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); } /* ========================================= 1. HERO BANNER ========================================= */ .op-hero { position: relative; width: 100%; height: 180px; background-size: cover; background-position: center center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; } .op-hero-overlay { position: absolute; inset: 0; } .op-hero-content { position: relative; z-index: 2; } .op-hero-content h1 { color: #fff; font-size: 36px; font-weight: 800; margin: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); font-family: "Georgia", serif; letter-spacing: 1px; } /* ========================================= 2. PAGE WRAPPER & LAYOUT ========================================= */ .od-page-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 20px 70px; } .od-layout { display: grid; grid-template-columns: 2.1fr 1fr; gap: 50px; align-items: start; } /* ========================================= 3. MAIN CONTENT (LEFT) ========================================= */ .od-main { position: relative; } /* Soft radial glow behind the offer image */ .od-main::before { content: ""; position: absolute; top: -60px; left: -60px; width: 130%; height: 150%; background: radial-gradient( circle at 30% 30%, rgba(248, 204, 0, 0.35), rgba(248, 204, 0, 0) 70% ); z-index: 0; pointer-events: none; } .od-img-box { position: relative; z-index: 1; line-height: 0; overflow: hidden; } .od-img-box img { display: block; width: 100%; height: auto; transition: transform 0.5s ease; } .od-img-box:hover img { transform: scale(1.02); } .od-caption { position: relative; z-index: 1; margin: 22px 0 0; font-size: 20px; font-weight: 800; text-transform: uppercase; color: #111111; letter-spacing: 0.3px; } /* ========================================= 4. SIDEBAR (RIGHT) ========================================= */ .od-sidebar { display: flex; flex-direction: column; gap: 28px; } /* Widget container */ .od-widget { background: #fff; border-radius: 6px; padding: 22px 20px 24px; box-shadow: var(--od-shadow); } .od-widget-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #1a1a1a; } .od-widget-underline { width: 40px; height: 3px; background: #e2574c; margin-bottom: 20px; } /* Popular Offers */ .od-popular-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #e6e6e6; text-decoration: none; } .od-popular-item:last-child { border-bottom: none; } .od-popular-thumb { flex-shrink: 0; width: 60px; height: 42px; overflow: hidden; } .od-popular-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .od-popular-label { font-size: 13px; font-weight: 700; line-height: 1.4; color: #1a1a1a; text-transform: uppercase; transition: color 0.2s ease; } .od-popular-item:hover .od-popular-label { color: #e2574c; } .od-popular-item.is-current .od-popular-label { color: #e2574c; } /* Share box */ .od-share-box { margin-top: 30px; background: #f2f2f2; padding: 20px; } .od-share-label { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #1a1a1a; } .fb-share-wrap { display: flex; flex-direction: column; gap: 6px; max-width: 120px; } .fb-share-count { display: block; text-align: center; background: #ffffff; border: 1px solid #ccc; border-radius: 3px; padding: 4px 0; font-size: 13px; color: #333; } .fb-share-btn { display: flex; align-items: center; justify-content: center; gap: 6px; background: #1877f2; color: #ffffff; font-size: 13px; font-weight: 700; padding: 7px 0; border-radius: 3px; text-decoration: none; } .fb-share-btn:hover { background: #166fe0; color: #ffffff; } .fb-share-btn svg { width: 14px; height: 14px; fill: #ffffff; } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 991px) { .od-layout { grid-template-columns: 1fr; gap: 36px; } .od-main::before { top: -30px; left: -30px; width: 120%; height: 130%; } } @media (max-width: 576px) { .od-page-wrap { padding: 30px 16px 50px; } .op-hero { height: 150px; } .op-hero-content h1 { font-size: 26px; } .od-caption { font-size: 17px; } .od-popular-thumb { width: 50px; height: 36px; } .od-popular-label { font-size: 12px; } }