/**
 * Payments & Pricing Page Styles
 * Text-first layout: stacked Payment Methods + Pricing blocks.
 * Used by both Qatar (RTG) and Dubai/GCC (RTS) delivery modes.
 * Contact form section reuses contact.css.
 */

/* ==========================================
   TEXT-FIRST LAYOUT — STACKED BLOCKS
   ========================================== */

.pp-content {
    padding: 96px 150px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.pp-content-block {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.pp-block-title {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0;
    color: #2D1F1F;
    margin: 0;
}

/* Label-style heading (smaller, bolder, uppercase) — used for "PRICING" */
.pp-block-title--upper {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

.pp-block-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pp-block-intro {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1A1A1A;
    margin: 0;
}

.pp-method-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pp-method-item {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1A1A1A;
    margin: 0;
}

.pp-method-item u {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pp-block-bullets {
    margin: 0;
    padding-inline-start: 40px;
    list-style: none;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1A1A1A;
}

.pp-block-bullets li {
    position: relative;
    margin: 0;
    padding-inline-start: 18px;
}

.pp-block-bullets li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    background: #1A1A1A;
    border-radius: 50%;
}


/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1023px) and (min-width: 768px) {
    .pp-content {
        padding: 64px 40px;
        gap: 48px;
    }
}

@media (max-width: 767px) {
    .pp-content {
        padding: 48px 24px;
        gap: 49px;
    }

    .pp-content-block {
        gap: 24px;
    }

    .pp-block-body {
        gap: 20px;
    }

    /* Hide forced line-breaks meant for desktop only */
    .pp-desktop-br {
        display: none;
    }
}