/* ═══════════════════════════════════════════════════
   3Ahub Order Form — Premium Cosmic Design
   ═══════════════════════════════════════════════════ */

/* ── Base Modal ── */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-modal.show {
    opacity: 1;
    visibility: visible;
}

/* ── Dark Overlay with Stars ── */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 20% 50%, rgba(30, 20, 60, 0.95), rgba(5, 5, 15, 0.97)),
        rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(12px);
    z-index: -1;
    overflow: hidden;
}

/* Star Particles via pseudo-elements */
.modal-overlay::before,
.modal-overlay::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    animation: twinkle 4s ease-in-out infinite alternate;
}

.modal-overlay::before {
    width: 2px;
    height: 2px;
    top: 15%;
    left: 12%;
    box-shadow:
        0 0 3px 1px rgba(255, 213, 111, 0.5),
        80px 30px 2px rgba(255, 255, 255, 0.4),
        200px 80px 2px rgba(200, 220, 255, 0.4),
        310px 20px 1px rgba(255, 200, 100, 0.3),
        450px 120px 2px rgba(180, 200, 255, 0.5),
        50px 200px 1px rgba(255, 255, 255, 0.3),
        350px 250px 2px rgba(255, 213, 111, 0.4),
        150px 300px 1px rgba(200, 220, 255, 0.3),
        500px 350px 2px rgba(255, 200, 150, 0.4),
        250px 400px 1px rgba(255, 255, 255, 0.3);
}

.modal-overlay::after {
    width: 1px;
    height: 1px;
    bottom: 20%;
    right: 15%;
    animation-delay: 2s;
    box-shadow:
        0 0 3px 1px rgba(180, 200, 255, 0.5),
        -60px -40px 1px rgba(255, 255, 255, 0.3),
        -180px -100px 2px rgba(255, 213, 111, 0.3),
        -300px -50px 1px rgba(200, 220, 255, 0.4),
        -100px -200px 2px rgba(255, 180, 100, 0.3),
        -400px -150px 1px rgba(255, 255, 255, 0.25),
        -250px -300px 2px rgba(180, 200, 255, 0.3),
        -50px -350px 1px rgba(255, 213, 111, 0.3),
        -350px -400px 2px rgba(200, 230, 255, 0.25),
        -150px -250px 1px rgba(255, 200, 150, 0.3);
}

@keyframes twinkle {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.4);
    }
}

/* ── Glass Card (SMALLER) ── */
.modal-content.glass-effect {
    background: rgba(14, 17, 35, 0.88);
    border: 1px solid rgba(255, 213, 111, 0.15);
    border-radius: 20px;
    padding: 28px 30px;
    width: min(420px, 88%);
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(255, 213, 111, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(20px) scale(0.92);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
}

/* Animated border glow */
.modal-content.glass-effect::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    background: linear-gradient(135deg, rgba(255, 213, 111, 0.3), transparent 40%, transparent 60%, rgba(180, 200, 255, 0.2));
    z-index: -1;
    animation: border-rotate 6s linear infinite;
    opacity: 0.5;
}

@keyframes border-rotate {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(30deg);
    }
}

.custom-modal.show .modal-content {
    transform: translateY(0) scale(1);
}

/* ── Close Button ── */
.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(255, 80, 80, 0.15);
    border-color: rgba(255, 80, 80, 0.3);
    color: #ff6b6b;
    transform: rotate(90deg) scale(1.1);
}

/* ── Header ── */
.modal-header {
    margin-bottom: 20px;
}

.modal-header h2 {
    font-size: 1.4rem;
    color: var(--accent, #ffd56f);
    margin-bottom: 6px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.modal-header p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
}

/* ── Social Proof Badge ── */
.social-proof-badge {
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.15);
    color: #ff7b7b;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 14px;
    font-weight: 600;
    animation: badge-fade 3s ease-in-out infinite alternate;
}

@keyframes badge-fade {
    0% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

/* ── Live Validation ── */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper input {
    width: 100%;
    padding-right: 36px;
    /* space for status icon */
}

.input-wrapper .field-status {
    position: absolute;
    right: 12px;
    font-size: 14px;
    pointer-events: none;
    transition: all 0.2s ease;
}

[dir="rtl"] .input-wrapper input {
    padding-right: 14px;
    padding-left: 36px;
}

[dir="rtl"] .input-wrapper .field-status {
    right: auto;
    left: 12px;
}

/* ── Form Fields ── */
.form-group {
    text-align: right;
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 0.82rem;
}

.form-group input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 11px 14px;
    color: white;
    font-family: inherit;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.form-group input:focus {
    border-color: var(--accent, #ffd56f);
    background: rgba(255, 213, 111, 0.04);
    box-shadow: 0 0 12px rgba(255, 213, 111, 0.08);
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* ── Phone Input Group ── */
.phone-input-group {
    display: flex;
    gap: 6px;
    direction: ltr;
}

.country-select {
    width: 95px;
    min-width: 95px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: white;
    padding: 11px 4px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

.country-select:focus {
    border-color: var(--accent, #ffd56f);
    background: rgba(255, 213, 111, 0.04);
}

.country-select option {
    background: #0e1123;
    color: white;
}

.phone-input-group input {
    flex: 1;
    min-width: 0;
}

/* ── Submit Button ── */
.submit-order-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--accent, #ffd56f), var(--accent-strong, #ffb547));
    color: #1b1d32;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    box-shadow: 0 8px 20px rgba(255, 181, 71, 0.15);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: button-pulse 2.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

/* Shimmer sweep on button */
.submit-order-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-25deg);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        left: -60%;
    }

    100% {
        left: 120%;
    }
}

@keyframes button-pulse {

    0%,
    100% {
        box-shadow: 0 8px 20px rgba(255, 181, 71, 0.15);
    }

    50% {
        box-shadow: 0 8px 30px rgba(255, 181, 71, 0.35);
        transform: scale(1.015);
    }
}

.submit-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 181, 71, 0.35);
    animation: none;
}

.submit-order-btn:active {
    transform: translateY(0) scale(0.98);
}

/* ── Footer Text ── */
.modal-footer-text {
    margin-top: 12px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* ── Trust Badges ── */
.trust-badges {
    display: flex;
    justify-content: space-around;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    gap: 8px;
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.trust-item span {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.trust-icon {
    width: 22px;
    height: 22px;
    background: rgba(255, 213, 111, 0.04);
    border: 1px solid rgba(255, 213, 111, 0.08);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* ═══════════════════════════════════════
   Mobile Responsive (≤ 600px) — Full Screen Alive
   ═══════════════════════════════════════ */
@media (max-width: 600px) {

    /* Modal fills the screen — no dead space */
    .custom-modal {
        align-items: stretch;
        padding: 0;
    }

    /* ✨ Animated aurora overlay — alive background */
    .modal-overlay {
        background:
            radial-gradient(ellipse at 20% 30%, rgba(255, 149, 0, 0.12) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 70%, rgba(100, 80, 220, 0.10) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 50%, rgba(14, 17, 35, 0.98) 0%, rgba(5, 5, 15, 0.99));
        animation: aurora-move 8s ease-in-out infinite alternate;
    }

    @keyframes aurora-move {
        0% {
            background-position: 0% 0%, 100% 100%, center;
        }

        50% {
            background-position: 30% 60%, 70% 30%, center;
        }

        100% {
            background-position: 60% 20%, 40% 80%, center;
        }
    }

    .modal-content.glass-effect {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        padding: 14px 16px 18px;
        max-height: 100dvh;
        min-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: rgba(14, 17, 35, 0.65);
        border: none;
    }

    /* No animated border on mobile — saves battery */
    .modal-content.glass-effect::before {
        display: none;
    }

    /* Header */
    .modal-header {
        margin-bottom: 10px;
    }

    .modal-header h2 {
        font-size: 1.15rem;
        letter-spacing: -0.3px;
    }

    .modal-header p {
        font-size: 0.74rem;
    }

    /* Social proof badge */
    .social-proof-badge {
        font-size: 0.64rem;
        padding: 4px 10px;
        margin-bottom: 10px;
    }

    /* Form fields — compact */
    .form-group {
        margin-bottom: 10px;
    }

    .form-group label {
        font-size: 0.76rem;
        margin-bottom: 4px;
    }

    .form-group input {
        padding: 11px 12px;
        font-size: 0.88rem;
        border-radius: 10px;
    }

    /* Phone row */
    .country-select {
        width: 85px;
        min-width: 85px;
        padding: 11px 4px;
        font-size: 12px;
        border-radius: 10px;
    }

    /* Product summary */
    .product-summary {
        padding: 8px 12px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .product-summary span {
        font-size: 0.74rem;
    }

    .product-summary .summary-price {
        font-size: 0.8rem;
    }

    /* Submit button — big, prominent, one line */
    .submit-order-btn {
        padding: 14px 12px;
        font-size: clamp(0.76rem, 3.8vw, 0.92rem);
        border-radius: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 8px;
    }

    /* Close button — bigger touch target */
    .modal-close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        font-size: 18px;
        background: rgba(255, 255, 255, 0.08);
    }

    /* Trust badges */
    .trust-badges {
        margin-top: 10px;
        padding-top: 10px;
        gap: 6px;
    }

    .trust-icon {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .trust-item span {
        font-size: 0.55rem;
    }

    .modal-footer-text {
        margin-top: 8px;
        font-size: 0.64rem;
    }
}

/* Extra small phones (iPhone SE, Galaxy A series) */
@media (max-width: 375px) {
    .modal-content.glass-effect {
        padding: 12px 14px 16px;
    }

    .modal-header h2 {
        font-size: 1.05rem;
    }

    .form-group input {
        padding: 10px 11px;
        font-size: 0.84rem;
    }

    .submit-order-btn {
        font-size: clamp(0.68rem, 3.4vw, 0.85rem);
        padding: 12px 10px;
    }
}

/* ═══════════════════════════════════════
   RTL Support
   ═══════════════════════════════════════ */
[dir="rtl"] .form-group {
    text-align: right;
}

[dir="rtl"] .modal-close {
    right: auto !important;
    left: 14px;
}

[dir="rtl"] .phone-input-group {
    direction: ltr;
}

/* ═══════════════════════════════════════
   Scrollbar Styling (for overflow)
   ═══════════════════════════════════════ */
.modal-content.glass-effect::-webkit-scrollbar {
    width: 4px;
}

.modal-content.glass-effect::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content.glass-effect::-webkit-scrollbar-thumb {
    background: rgba(255, 213, 111, 0.15);
    border-radius: 10px;
}

/* ═══════════════════════════════════════
   Product Summary Card
   ═══════════════════════════════════════ */
.product-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 213, 111, 0.04);
    border: 1px solid rgba(255, 213, 111, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    gap: 10px;
}

.product-summary span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.product-summary .summary-price {
    color: var(--accent, #ffd56f);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ═══════════════════════════════════════
   Success Screen
   ═══════════════════════════════════════ */
.success-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
    gap: 12px;
    animation: success-fade-in 0.5s ease-out;
}

@keyframes success-fade-in {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.success-checkmark {
    animation: check-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes check-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.check-path {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    animation: draw-check 0.6s 0.3s ease forwards;
}

@keyframes draw-check {
    to {
        stroke-dashoffset: 0;
    }
}

.success-screen h3 {
    color: #4ade80;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.success-screen p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin: 0;
}

/* Mobile adjustments for new elements */
@media (max-width: 480px) {
    .product-summary {
        padding: 8px 10px;
        margin-bottom: 12px;
    }

    .product-summary span {
        font-size: 0.72rem;
    }

    .product-summary .summary-price {
        font-size: 0.78rem;
    }

    .success-screen {
        padding: 20px 10px;
    }

    .success-screen h3 {
        font-size: 1.1rem;
    }

    .success-screen p {
        font-size: 0.78rem;
    }

    .success-checkmark svg {
        width: 50px;
        height: 50px;
    }
}