/* ===========================================
   Mada Platform - Offers Section
   Unified card system with per-type identity
   =========================================== */

/* ===========================================
   OFFERS SECTION LAYOUT
   =========================================== */
.offers-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%);
    margin-top: 60px;
}

.section-title-gradient {
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #2f5bff, #12b6a6, #f6c56b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    text-align: center;
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 40px;
}

/* ===========================================
   OFFERS GRID
   =========================================== */
.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

/* ===========================================
   OFFER CARD
   =========================================== */
.offer-card {
    --offer-accent-color: #2f5bff;
    --offer-bg-color: #f8fbff;
    --offer-text-color: #0f172a;
    --offer-muted-color: #5f6f8d;
    --offer-date-bg-color: #e9f0ff;
    --offer-code-bg-color: #e7f7ff;
    --offer-code-border-color: #91c3ff;
    --offer-btn-start: #2f5bff;
    --offer-btn-end: #12b6a6;
    --offer-btn-text-color: #ffffff;
    --offer-badge-start: #2f5bff;
    --offer-badge-end: #12b6a6;
    --offer-glow-color: rgba(47, 91, 255, 0.2);

    background: var(--offer-bg-color);
    border-radius: 22px;
    padding: 56px 24px 26px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px color-mix(in srgb, var(--offer-accent-color) 16%, transparent);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(15, 23, 42, 0.06);
    text-align: center;
    color: var(--offer-text-color);
    animation: offerCardReveal 0.72s ease both;
}

.offer-card::before {
    content: '';
    position: absolute;
    inset: auto -22% -42% -22%;
    height: 62%;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.55), transparent 64%);
    pointer-events: none;
}

.offer-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, color-mix(in srgb, var(--offer-accent-color) 12%, transparent), transparent 42%, color-mix(in srgb, var(--offer-accent-color) 7%, transparent));
    pointer-events: none;
}

.offer-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 44px rgba(15, 23, 42, 0.14), 0 16px 38px var(--offer-glow-color);
}

.offers-grid .offer-card:nth-child(2n) {
    animation-delay: 0.05s;
}

.offers-grid .offer-card:nth-child(3n) {
    animation-delay: 0.1s;
}

@keyframes offerCardReveal {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.offer-offer,
.offer-card--offer {
    --offer-accent-color: #2f5bff;
    --offer-bg-color: #f8fbff;
    --offer-text-color: #0f172a;
    --offer-muted-color: #5f6f8d;
    --offer-date-bg-color: #e8efff;
    --offer-code-bg-color: #e6f4ff;
    --offer-code-border-color: #99beff;
    --offer-btn-start: #2f5bff;
    --offer-btn-end: #12b6a6;
    --offer-badge-start: #2f5bff;
    --offer-badge-end: #12b6a6;
    --offer-glow-color: rgba(47, 91, 255, 0.23);
}

.package-offer,
.offer-card--package {
    --offer-accent-color: #2563eb;
    --offer-bg-color: #eff6ff;
    --offer-text-color: #102247;
    --offer-muted-color: #4f6390;
    --offer-date-bg-color: #dbeafe;
    --offer-code-bg-color: #d8e7ff;
    --offer-code-border-color: #8fb4ff;
    --offer-btn-start: #1d4ed8;
    --offer-btn-end: #3b82f6;
    --offer-badge-start: #1d4ed8;
    --offer-badge-end: #3b82f6;
    --offer-glow-color: rgba(37, 99, 235, 0.24);
}

.announcement-offer,
.offer-card--announcement {
    --offer-accent-color: #f59e0b;
    --offer-bg-color: #fff7ed;
    --offer-text-color: #4a2c00;
    --offer-muted-color: #7b5d2c;
    --offer-date-bg-color: #ffedd5;
    --offer-code-bg-color: #ffedd5;
    --offer-code-border-color: #f1b862;
    --offer-btn-start: #d97706;
    --offer-btn-end: #f59e0b;
    --offer-badge-start: #d97706;
    --offer-badge-end: #f59e0b;
    --offer-glow-color: rgba(245, 158, 11, 0.26);
}

.broadcast-offer,
.offer-card--live {
    --offer-accent-color: #ef4444;
    --offer-bg-color: #fef2f2;
    --offer-text-color: #4a1111;
    --offer-muted-color: #8f3d3d;
    --offer-date-bg-color: #fee2e2;
    --offer-code-bg-color: #fee2e2;
    --offer-code-border-color: #ef9f9f;
    --offer-btn-start: #b91c1c;
    --offer-btn-end: #ef4444;
    --offer-badge-start: #b91c1c;
    --offer-badge-end: #ef4444;
    --offer-glow-color: rgba(239, 68, 68, 0.24);
}

.referral-offer,
.offer-card--referral {
    --offer-accent-color: #b87a15;
    --offer-bg-color: #fff6df;
    --offer-text-color: #402c07;
    --offer-muted-color: #816537;
    --offer-date-bg-color: #ffebbe;
    --offer-code-bg-color: #fff0c9;
    --offer-code-border-color: #d8a556;
    --offer-btn-start: #b87a15;
    --offer-btn-end: #e5a93f;
    --offer-badge-start: #b87a15;
    --offer-badge-end: #e5a93f;
    --offer-glow-color: rgba(184, 122, 21, 0.24);
}

.coupon-offer,
.offer-card--coupon {
    --offer-accent-color: #0c8f83;
    --offer-bg-color: #e8fff8;
    --offer-text-color: #0c3b35;
    --offer-muted-color: #3f7169;
    --offer-date-bg-color: #c9f5e9;
    --offer-code-bg-color: #d6fff3;
    --offer-code-border-color: #69cebc;
    --offer-btn-start: #0c8f83;
    --offer-btn-end: #11b29f;
    --offer-badge-start: #0c8f83;
    --offer-badge-end: #11b29f;
    --offer-glow-color: rgba(12, 143, 131, 0.23);
}

.special-offer {
    --offer-accent-color: #f6c56b;
    --offer-bg-color: #fff9ee;
    --offer-text-color: #3e2e0d;
    --offer-muted-color: #7b6844;
    --offer-date-bg-color: #fff1cf;
    --offer-code-bg-color: #fff1cf;
    --offer-code-border-color: #edc374;
    --offer-btn-start: #d79a25;
    --offer-btn-end: #f6c56b;
    --offer-badge-start: #d79a25;
    --offer-badge-end: #f6c56b;
}

/* ===========================================
   TYPE MARKER + BADGES
   =========================================== */
.offer-corner-tag {
    position: absolute;
    top: 12px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 0.74rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.82);
    background: color-mix(in srgb, var(--offer-accent-color) 18%, #ffffff);
    color: var(--offer-text-color);
    border: 1px solid rgba(15, 23, 42, 0.14);
    border: 1px solid color-mix(in srgb, var(--offer-accent-color) 38%, #ffffff);
    z-index: 2;
}

.offer-corner-icon {
    font-size: 0.85rem;
    line-height: 1;
}

.offer-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.77rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--offer-badge-start), var(--offer-badge-end));
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18);
    z-index: 2;
}

.offer-badge.offer-badge--live,
.offer-badge.live {
    animation: pulse 2s infinite;
}

.offer-badge.offer-badge--offer {
    --offer-badge-start: #2f5bff;
    --offer-badge-end: #12b6a6;
}

.offer-badge.offer-badge--package {
    --offer-badge-start: #1d4ed8;
    --offer-badge-end: #3b82f6;
}

.offer-badge.offer-badge--announcement {
    --offer-badge-start: #d97706;
    --offer-badge-end: #f59e0b;
}

.offer-badge.offer-badge--live {
    --offer-badge-start: #b91c1c;
    --offer-badge-end: #ef4444;
}

.offer-badge.offer-badge--referral {
    --offer-badge-start: #d79a25;
    --offer-badge-end: #f6c56b;
}

.offer-badge.offer-badge--coupon,
.offer-badge.coupon {
    --offer-badge-start: #0f766e;
    --offer-badge-end: #14b8a6;
}

.offer-badge.special {
    --offer-badge-start: #d79a25;
    --offer-badge-end: #f6c56b;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}

/* ===========================================
   OFFER CONTENT
   =========================================== */
.offer-icon {
    font-size: 3.4rem;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.offer-icon.is-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.offer-icon.is-image img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.18);
}

.offer-title {
    font-size: 1.32rem;
    font-weight: 800;
    color: var(--offer-text-color);
    margin-bottom: 10px;
    line-height: 1.35;
    position: relative;
    z-index: 1;
}

.offer-description {
    color: var(--offer-muted-color);
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.65;
    position: relative;
    z-index: 1;
}

/* ===========================================
   OFFER PRICING
   =========================================== */
.offer-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.old-price {
    font-size: 1.03rem;
    color: var(--offer-muted-color);
    text-decoration: line-through;
}

.new-price {
    font-size: 1.82rem;
    font-weight: 900;
    color: var(--offer-accent-color);
}

.offer-date {
    background: var(--offer-date-bg-color);
    padding: 10px 16px;
    border-radius: 12px;
    margin-bottom: 18px;
    color: var(--offer-text-color);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.offer-benefits-list {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.offer-details-box {
    text-align: right;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--offer-accent-color) 26%, #ffffff);
    background: color-mix(in srgb, var(--offer-accent-color) 8%, #ffffff);
    position: relative;
    z-index: 1;
}

.offer-details-box summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--offer-text-color);
    list-style: none;
}

.offer-details-box summary::-webkit-details-marker {
    display: none;
}

.offer-details-box summary::before {
    content: '▸';
    display: inline-block;
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.offer-details-box[open] summary::before {
    transform: rotate(90deg);
}

.offer-details-summary {
    margin: 8px 0 6px;
    color: var(--offer-muted-color);
    font-size: 0.86rem;
    line-height: 1.6;
}

.offer-details-list {
    margin: 0;
    padding-right: 16px;
    display: grid;
    gap: 4px;
    color: var(--offer-muted-color);
    font-size: 0.84rem;
}

.offer-details-list li strong {
    color: var(--offer-text-color);
}

.offer-details-note {
    margin-top: 8px;
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--offer-text-color) 80%, #111827);
}

.offer-details-class-picker {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.offer-details-class-picker label {
    font-size: 0.8rem;
    color: var(--offer-muted-color);
    font-weight: 700;
}

.offer-class-preview-select {
    border: 1px solid color-mix(in srgb, var(--offer-accent-color) 26%, #ffffff);
    background: #ffffff;
    color: var(--offer-text-color);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.9rem;
}

.offer-details-empty {
    color: var(--offer-muted-color);
    font-size: 0.84rem;
}

.offer-benefit-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 0.86rem;
    color: var(--offer-muted-color);
}

.offer-benefit-item strong {
    color: var(--offer-text-color);
}

.offer-benefit-item small {
    color: var(--offer-accent-color);
    font-weight: 700;
}

/* ===========================================
   COUPON CODE
   =========================================== */
.coupon-code {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--offer-code-bg-color);
    border: 2px dashed var(--offer-code-border-color);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.coupon-code--offer {
    margin-bottom: 18px;
}

.coupon-code .code {
    font-family: 'Fira Code', monospace;
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--offer-text-color);
    letter-spacing: 1.6px;
}

.copy-btn {
    background: linear-gradient(135deg, var(--offer-btn-start), var(--offer-btn-end));
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.copy-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.coupon-expiry {
    color: #b91c1c;
    color: color-mix(in srgb, var(--offer-text-color) 74%, #dc2626);
    font-size: 0.9rem;
    font-weight: 700;
}

/* ===========================================
   OFFER BUTTON
   =========================================== */
.offer-btn {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(135deg, var(--offer-btn-start), var(--offer-btn-end));
    color: var(--offer-btn-text-color);
    text-decoration: none;
    border-radius: 25px;
    font-weight: 800;
    transition: all 0.24s ease;
    box-shadow: 0 8px 18px rgba(47, 91, 255, 0.28);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--offer-btn-start) 45%, transparent);
    position: relative;
    z-index: 1;
}

.offer-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 12px 24px rgba(47, 91, 255, 0.35);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--offer-btn-start) 55%, transparent);
}

.offer-btn.offer-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.offer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.offer-actions .offer-btn,
.offer-actions .offer-secondary-btn {
    min-width: 100%;
}

.offer-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--offer-accent-color) 30%, #ffffff);
    background: #ffffff;
    color: var(--offer-text-color);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.offer-secondary-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--offer-accent-color) 20%, transparent);
}

.offer-secondary-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.offer-social-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.offer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--offer-accent-color) 26%, #ffffff);
    background: #ffffff;
    color: var(--offer-text-color);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--offer-accent-color) 15%, transparent);
}

.offer-social-btn img,
.offer-social-btn .offer-social-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.offer-social-btn .offer-social-icon--x {
    width: 18px;
    height: 18px;
}

.offer-social-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--offer-accent-color) 20%, transparent);
}

.offer-social-btn--whatsapp {
    background: #ffffff;
    color: #25d366;
    border-color: #1daa52;
}

.offer-social-btn--telegram {
    background: #ffffff;
    color: #27a7e7;
    border-color: #1584ba;
}

.offer-social-btn--facebook {
    background: #ffffff;
    color: #1877f2;
    border-color: #115ec2;
    font-size: 1.15rem;
}

.offer-social-btn--x {
    background: #ffffff;
    color: #111111;
    border-color: #000000;
}

.offer-social-btn--instagram {
    background: #ffffff;
    color: #dd2a7b;
    border-color: #9b3aa9;
}

.offer-social-btn--copy {
    background: color-mix(in srgb, var(--offer-accent-color) 10%, #ffffff);
    color: var(--offer-text-color);
    border-color: color-mix(in srgb, var(--offer-accent-color) 32%, #ffffff);
    font-size: 1.05rem;
}

.offers-share-page .offers-grid {
    max-width: 520px;
    margin: 0 auto;
}

/* ===========================================
   RESPONSIVE - OFFERS
   =========================================== */
@media (max-width: 768px) {
    .offers-grid {
        grid-template-columns: 1fr;
    }

    .section-title-gradient {
        font-size: 1.6rem;
    }

    .offer-card {
        padding: 56px 20px 24px;
    }

    .offer-badge {
        font-size: 0.72rem;
        padding: 5px 10px;
    }

    .offer-corner-tag {
        font-size: 0.7rem;
        padding: 4px 9px;
    }

    .offer-actions {
        grid-template-columns: 1fr;
    }

    .offer-actions .offer-btn,
    .offer-actions .offer-secondary-btn {
        min-width: 100%;
    }

    .offer-social-actions {
        justify-content: center;
    }
}