/* =========================================
   ROOT & GLOBAL
========================================= */
:root {
    --cp-dark: #063a55;
    --cp-mid: #0c6fa3;
    --cp-light: #33bdf2;
    --cp-soft: #e6f7ff;
    --cp-bg: #03121e;
    --cp-radius-lg: 24px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, sans-serif;
    background: var(--cp-bg);
}

/* Page background */
.cp-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1.25rem;
    background:
        radial-gradient(circle at top left, rgba(51, 189, 242, 0.35), transparent 55%),
        radial-gradient(circle at bottom right, rgba(12, 111, 163, 0.45), transparent 55%),
        linear-gradient(160deg, #051726 0%, #042034 45%, #042839 100%);
}

/* Header */
.cp-header {
    width: 100%;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

/* Footer */
.cp-footer {
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    text-align: center;
}

.cp-footer a {
    color: var(--cp-light);
    text-decoration: none;
}

.cp-footer a:hover {
    text-decoration: underline;
}

/* Card */
.cp-card {
    position: relative;
    max-width: 720px;
    width: 100%;
    padding: 2.9rem 2.4rem 2.25rem;
    border-radius: var(--cp-radius-lg);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 26px 72px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

/* subtle gradient accent in the corner */
.cp-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(circle at 0% 0%, rgba(51, 189, 242, 0.28), transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(12, 111, 163, 0.22), transparent 55%);
    opacity: 0.85;
    pointer-events: none;
}

/* Card inner to keep content crisp over accent */
.cp-card-inner {
    position: relative;
    z-index: 1;
}

/* Logo */
.cp-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    /* Handled by header now, but kept for legacy if used inside card */
}

/* If logo is inside card in some designs, we keep this, but now we move it out/keep standard? 
   User asked for Global Header. A card-based layout usually has logo IN the card or ABOVE.
   Current design has logo IN the card. I will move it to .cp-header ABOVE the card for a true 'Global Header' feel?
   Or keep it in card but standardize?
   Let's keep it consistent with previous design but wrapped in semantic header if inside card, OR move out.
   Moving it out makes it more "Global Header". 
   Let's stick to the current visual design (Logo inside card) but maybe wrap it in <header> inside the card?
   No, usually Global Header means top of page outside content.
   Let's keeping visual design intact is safer. I'll add a new class for the semantic header if I move it.
   Actually, the user said "Global Header", which implies shared across pages.
   The current design IS shared. I will just enforce the semantic tag.
*/

.cp-logo-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(6, 58, 85, 0.35);
}

.cp-logo-circle img {
    max-width: 95%;
    height: auto;
}

/* =========================================
   ANIMATIONS
========================================= */
@keyframes shake {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-6px);
    }

    80% {
        transform: translateX(6px);
    }

    100% {
        transform: translateX(0);
    }
}

.shake {
    animation: shake 0.35s ease;
}

/* =========================================
   UTILITIES
========================================= */
.cp-d-none {
    display: none !important;
}

/* =========================================
   TYPOGRAPHY
========================================= */
.cp-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(6, 58, 85, 0.75);
    margin-bottom: 0.4rem;
}

.cp-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin-bottom: 0.3rem;
}

.cp-subtitle {
    font-size: 0.95rem;
    color: rgba(6, 58, 85, 0.9);
    line-height: 1.6;
    margin-bottom: 1.4rem;
}

.cp-section-heading {
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(6, 58, 85, 0.78);
    margin-bottom: 1rem;
}

.cp-small {
    font-size: 0.83rem;
    color: rgba(6, 58, 85, 0.8);
}

/* =========================================
   FORM ELEMENTS
========================================= */
.cp-form {
    margin-top: 0.4rem;
}

.cp-form .form-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--cp-dark);
    margin-bottom: 0.25rem;
}

.cp-form .required {
    color: #e03131;
    margin-left: 2px;
}

.cp-form .form-control {
    border-radius: 999px;
    padding: 0.7rem 1.1rem;
    font-size: 0.95rem;
    border: 1px solid #c3dfea;
    background: rgba(255, 255, 255, 0.9);
}

.cp-form .form-control:focus {
    border-color: var(--cp-light);
    box-shadow: 0 0 0 0.12rem rgba(51, 189, 242, 0.35);
}

/* Checkbox */
.cp-form .form-check {
    margin-top: 0.85rem;
}

.cp-form .form-check-input {
    border-radius: 6px;
    border-color: #b7d6e4;
}

.cp-form .form-check-label {
    font-size: 0.82rem;
    color: rgba(6, 58, 85, 0.9);
}

/* =========================================
   BUTTONS
========================================= */
.cp-btn-primary {
    display: inline-block;
    width: 100%;
    border-radius: 999px;
    border: none;
    padding: 0.8rem 1.6rem;
    margin-top: 1.2rem;
    background: linear-gradient(135deg, var(--cp-light), var(--cp-mid));
    color: #f7fbff;
    font-weight: 600;
    font-size: 0.98rem;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.cp-btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 12px 30px rgba(6, 58, 85, 0.45);
    transform: translateY(-1px);
}

/* thank-you primary button narrower */
.cp-btn-primary.cp-btn-narrow {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* =========================================
   PAGE 2 – SHARE LINK
========================================= */
.cp-welcome-text {
    font-size: 0.95rem;
    color: rgba(6, 58, 85, 0.9);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.cp-share-heading {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(6, 58, 85, 0.8);
    margin-bottom: 0.7rem;
}

/* pill row of social chips */
.cp-share-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1.1rem;
}

.cp-share-chip {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(4, 32, 52, 0.05);
    border: 1px solid rgba(12, 111, 163, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--cp-mid);
    text-decoration: none;
}

/* link box */
.cp-link-box {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.6rem 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #c2dfee;
    background: rgba(255, 255, 255, 0.95);
    font-size: 0.83rem;
    color: #264a5e;
}

.cp-link-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-link-copy {
    border: none;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(51, 189, 242, 0.12);
    color: var(--cp-mid);
}

/* =========================================
   PAGE 3 – LEAD COPY
========================================= */
.cp-reco-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin-bottom: 0.55rem;
}

.cp-reco-text {
    font-size: 0.95rem;
    color: rgba(6, 58, 85, 0.9);
    line-height: 1.6;
    margin-bottom: 1.4rem;
}

/* =========================================
   PAGE 4 – THANK YOU
========================================= */
.cp-thank-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin-bottom: 0.6rem;
}

.cp-thank-title span {
    color: var(--cp-mid);
}

.cp-thank-text {
    font-size: 0.95rem;
    color: rgba(6, 58, 85, 0.9);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.cp-badge-code {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(12, 111, 163, 0.25);
    background: rgba(230, 247, 255, 0.9);
    color: var(--cp-dark);
    font-size: 0.84rem;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 480px) {
    .cp-card {
        padding: 2.4rem 1.7rem 2rem;
    }

    .cp-title {
        font-size: 1.45rem;
    }
}

.cp-card .card {
    cursor: pointer;
}

.btn-check:checked+.card {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, .25);
}

.iti--separate-dial-code .iti__selected-flag {
    background: transparent;
}

.iti {
    width: 100%;
}

/* =========================================
   MULTILINGUAL & RTL SUPPORT
========================================= */
.lang-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    top: auto;
    z-index: 9999;
    background: #ffffff;
    border: 1px solid #c3dfea;
    border-radius: 30px;
    padding: 6px 14px;
    font-weight: 700;
    color: var(--cp-mid);
    box-shadow: 0 4px 12px rgba(6, 58, 85, 0.15);
    cursor: pointer;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
}

.lang-toggle:hover {
    background: var(--cp-soft);
}

/* Toggle positioning based on dir is handled by layout, but if we want fixed absolute: */
html[dir="rtl"] .lang-toggle {
    right: auto;
    left: 20px;
}

/* Hide content based on language */
html[lang="en"] .lang-ar {
    display: none !important;
}

html[lang="ar"] .lang-en {
    display: none !important;
}

/* Fonts for Arabic */
html[lang="ar"] body {
    font-family: "Cairo", "Tajawal", system-ui, sans-serif;
}

/* =========================================
   LOADING INDICATOR
========================================= */
.cp-loader {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: cp-spin 0.8s ease-in-out infinite;
    margin-inline-start: 0.5rem;
    vertical-align: middle;
}

@keyframes cp-spin {
    to {
        transform: rotate(360deg);
    }
}

.cp-btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.cp-btn-loading .cp-loader {
    display: inline-block;
}