/* ============================================================
   SALES & REFUNDS POLICY PAGE STYLES
   Page: resources/views/main/legal/sales-refunds.blade.php
   Depends on global variables defined in style.css:
   - Colors: --primary-blue, --primary-green, --text-dark,
     --text-muted, --border-light, --white
   - Spacing: --spacing-*
   - Typography: --font-size-*, --font-weight-*, --line-height-*
   - Transitions: --transition
   - Radius: --radius-*
   - Gradients: --gradient-empty
   ============================================================ */

/* ============================================================
   TITLE SECTION
   ============================================================ */

   .policy-title-section {
    margin-bottom: var(--spacing-3xl);
}

/* ============================================================
   KEYFRAMES – gradient shift animation
   ============================================================ */

@keyframes gradient-shift {
    50% {
        background-position: 100% 50%;
    }
}

/* ============================================================
   POLICY DESCRIPTION – introductory text
   ============================================================ */

.policy-description {
    margin-bottom: var(--spacing-3xl);
}

.policy-description p {
    color: var(--text-dark);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-lg);
}

/* ============================================================
   RETURN POLICY SECTION – main content area
   ============================================================ */

.return-policy-section {
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--border-light);
}

.return-policy-title {
    color: var(--primary-blue);
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.policy-icon {
    margin-right: var(--spacing-lg);
    font-size: var(--font-size-xl);
    transition: var(--transition);
}

.return-policy-title:hover .policy-icon {
    transform: scale(1.1);
    color: var(--primary-green);
}

/* ============================================================
   POLICY SECTIONS – individual policy blocks
   ============================================================ */

.policy-section {
    margin-bottom: var(--spacing-3xl);
    animation: slideInLeft 0.4s ease-out;
}

.policy-section:nth-child(1) {
    animation-delay: 0.1s;
}

.policy-section:nth-child(2) {
    animation-delay: 0.2s;
}

.policy-section-title {
    color: var(--primary-blue);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--primary-green);
    display: inline-block;
}

.policy-section-content ul,
.policy-section-content ol {
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-2xl);
}

html[dir="rtl"] .policy-section-content ul,
html[dir="rtl"] .policy-section-content ol {
    padding-left: 0;
    padding-right: var(--spacing-2xl);
}

/* ============================================================
   POLICY LIST ITEMS – with checkmark bullet
   ============================================================ */

.policy-list-item {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-2xl);
    position: relative;
}

.policy-list-item::before {
    content: "✓";
    color: var(--primary-green);
    position: absolute;
    left: 0;
    font-weight: var(--font-weight-bold);
}

html[dir="rtl"] .policy-list-item {
    padding-left: 0;
    padding-right: var(--spacing-2xl);
}

html[dir="rtl"] .policy-list-item::before {
    left: auto;
    right: 0;
}

/* ============================================================
   HIGHLIGHT BOX – emphasized content block
   ============================================================ */

.policy-highlight-box {
    background: var(--gradient-empty);
    border-left: 4px solid var(--primary-blue);
    padding: var(--spacing-xl) var(--spacing-2xl);
    margin: var(--spacing-2xl) 0;
    border-radius: var(--radius-lg);
}

html[dir="rtl"] .policy-highlight-box {
    border-left: none;
    border-right: 4px solid var(--primary-blue);
}

.policy-highlight-box p {
    margin-bottom: 0;
    color: var(--text-dark);
}

/* ============================================================
   DATE STAMP – policy last updated
   ============================================================ */

.policy-date-stamp {
    text-align: right;
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-light);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-style: italic;
}

html[dir="rtl"] .policy-date-stamp {
    text-align: left;
}

/* ============================================================
   BACK TO TOP LINK
   ============================================================ */

.back-to-top-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--primary-blue);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: var(--transition);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-lg);
    background: var(--bg-white);
}

.back-to-top-link:hover {
    color: var(--primary-green);
    transform: translateY(-2px);
    background: var(--bg-light);
}

/* ============================================================
   DARK MODE
   ============================================================ */

@media (prefers-color-scheme: dark) {

    :root {
        --bg-card:      #1a1a2e;
        --text-dark:    #eeeeee;
        --text-muted:   #a0a0a0;
        --border-light: #2c2c3e;
    }

    .policy-highlight-box {
        background: var(--gradient-empty);
    }

    .back-to-top-link {
        background: var(--bg-card);
    }
}

/* ============================================================
   KEYFRAMES – slideInLeft animation for sections
   ============================================================ */

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}