/* assets/css/pages/connect.css */

/* ==========================================================
   VASTU CREATORS
   Digital Card / Connect Page
   ========================================================== */

:root {
    --connect-bg: #11111d;
    --connect-bg-deep: #0b0b13;

    --connect-surface: rgba(27, 27, 47, 0.88);
    --connect-surface-hover: rgba(36, 36, 59, 0.96);

    --connect-border: rgba(212, 175, 55, 0.18);
    --connect-border-hover: rgba(212, 175, 55, 0.48);

    --connect-gold: #d4af37;
    --connect-gold-soft: #e2c66c;

    --connect-text: #f7f4ed;
    --connect-text-muted: #aaa8b2;

    --connect-radius-lg: 28px;
    --connect-radius-md: 18px;

    --connect-shadow:
        0 24px 70px rgba(0, 0, 0, 0.38);
}


/* ==========================================================
   RESET
   Scoped to Connect page
   ========================================================== */

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

html {
    min-height: 100%;
    background: var(--connect-bg-deep);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;

    font-family:
        "Poppins",
        sans-serif;

    color: var(--connect-text);

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(212, 175, 55, 0.12),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(65, 61, 105, 0.16),
            transparent 35%
        ),
        linear-gradient(
            160deg,
            var(--connect-bg),
            var(--connect-bg-deep)
        );

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* ==========================================================
   PAGE
   ========================================================== */

.connect-page {
    position: relative;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    width: 100%;
    min-height: 100vh;

    padding:
        max(18px, env(safe-area-inset-top))
        14px
        max(24px, env(safe-area-inset-bottom));

    overflow: hidden;
}

.connect-page::before {
    content: "";

    position: fixed;
    top: -150px;
    left: 50%;

    width: 320px;
    height: 320px;

    border: 1px solid rgba(212, 175, 55, 0.08);
    border-radius: 50%;

    transform: translateX(-50%);

    pointer-events: none;
}

.connect-page::after {
    content: "";

    position: fixed;
    bottom: -180px;
    right: -130px;

    width: 360px;
    height: 360px;

    border: 1px solid rgba(212, 175, 55, 0.06);
    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================
   CONNECT CARD
   ========================================================== */

.connect-card {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 460px;

    padding: 24px 18px 22px;

    background:
        linear-gradient(
            145deg,
            rgba(31, 31, 52, 0.94),
            rgba(17, 17, 29, 0.96)
        );

    border: 1px solid var(--connect-border);
    border-radius: var(--connect-radius-lg);

    box-shadow: var(--connect-shadow);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* ==========================================================
   CLOSE
   ========================================================== */

.connect-close {
    position: absolute;
    top: 16px;
    right: 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: var(--connect-text-muted);

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;

    text-decoration: none;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

.connect-close svg {
    width: 20px;
    height: 20px;
}

.connect-close:hover,
.connect-close:focus-visible {
    color: var(--connect-gold-soft);

    background: rgba(212, 175, 55, 0.08);

    border-color: var(--connect-border-hover);

    transform: rotate(4deg);
}


/* ==========================================================
   BRAND
   ========================================================== */

.connect-brand {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        8px
        48px
        0;

    text-align: center;
}

.connect-logo {
    display: block;

    width: 82px;
    height: 82px;

    object-fit: contain;

    margin-bottom: 12px;

    filter:
        drop-shadow(
            0 8px 20px rgba(0, 0, 0, 0.28)
        );
}

.connect-brand-name {
    margin: 0;

    font-family:
        "Cinzel",
        serif;

    font-size: clamp(1.35rem, 6vw, 1.75rem);
    font-weight: 600;

    line-height: 1.2;

    letter-spacing: 0.075em;

    color: var(--connect-text);

    text-transform: uppercase;
}

.connect-tagline {
    margin:
        8px
        0
        0;

    max-width: 270px;

    font-size: 0.78rem;
    font-weight: 300;

    line-height: 1.6;

    letter-spacing: 0.025em;

    color: var(--connect-text-muted);
}


/* ==========================================================
   DIVIDER
   ========================================================== */

.connect-divider {
    position: relative;

    width: 72px;
    height: 1px;

    margin:
        20px
        auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--connect-gold),
            transparent
        );

    opacity: 0.72;
}


/* ==========================================================
   INTRO
   ========================================================== */

.connect-intro {
    margin-bottom: 18px;

    text-align: center;
}

.connect-intro h2 {
    margin: 0;

    font-family:
        "Cinzel",
        serif;

    font-size: 1.05rem;
    font-weight: 600;

    letter-spacing: 0.12em;

    color: var(--connect-gold-soft);

    text-transform: uppercase;
}

.connect-intro p {
    margin:
        7px
        0
        0;

    font-size: 0.8rem;
    font-weight: 300;

    color: var(--connect-text-muted);
}


/* ==========================================================
   ACTION LIST
   ========================================================== */

.connect-actions {
    display: grid;

    gap: 10px;
}

/* assets/css/pages/connect.css */

.connect-actions[hidden],
.connect-intro[hidden],
.connect-divider[hidden],
.connect-footer[hidden] {
    display: none;
}

/* ==========================================================
   ACTION
   ========================================================== */

.connect-action {
    position: relative;

    display: grid;

    grid-template-columns:
        44px
        minmax(0, 1fr)
        24px;

    align-items: center;

    width: 100%;
    min-height: 68px;

    padding:
        10px
        13px;

    color: var(--connect-text);

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.018)
        );

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: var(--connect-radius-md);

    font: inherit;

    text-align: left;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.connect-action:hover,
.connect-action:focus-visible {
    background:
        linear-gradient(
            120deg,
            rgba(212, 175, 55, 0.09),
            rgba(255, 255, 255, 0.03)
        );

    border-color: var(--connect-border-hover);

    transform: translateY(-1px);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.18);
}

.connect-action:active {
    transform: scale(0.985);
}


/* ==========================================================
   ACTION ICON
   ========================================================== */

.connect-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: var(--connect-gold-soft);

    background: rgba(212, 175, 55, 0.075);

    border: 1px solid rgba(212, 175, 55, 0.14);
    border-radius: 12px;
}

.connect-action-icon svg {
    width: 19px;
    height: 19px;

    stroke-width: 1.7;
}


/* ==========================================================
   ACTION CONTENT
   ========================================================== */

.connect-action-content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding-left: 4px;
}

.connect-action-content strong {
    overflow: hidden;

    font-size: 0.86rem;
    font-weight: 500;

    line-height: 1.35;

    letter-spacing: 0.01em;

    color: var(--connect-text);

    text-overflow: ellipsis;
    white-space: nowrap;
}

.connect-action-content small {
    margin-top: 3px;

    overflow: hidden;

    font-size: 0.69rem;
    font-weight: 300;

    line-height: 1.35;

    color: var(--connect-text-muted);

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   ACTION ARROW
   ========================================================== */

.connect-action-arrow {
    width: 18px;
    height: 18px;

    justify-self: end;

    color: rgba(255, 255, 255, 0.32);

    stroke-width: 1.6;

    transition:
        color 180ms ease,
        transform 180ms ease;
}

.connect-action:hover .connect-action-arrow,
.connect-action:focus-visible .connect-action-arrow {
    color: var(--connect-gold-soft);

    transform: translateX(2px);
}


/* ==========================================================
   FOOTER
   ========================================================== */

.connect-footer {
    padding-top: 19px;

    text-align: center;
}

.connect-trust {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin: 0;

    font-size: 0.63rem;
    font-weight: 300;

    letter-spacing: 0.08em;

    color: rgba(247, 244, 237, 0.48);

    text-transform: uppercase;
}

.connect-trust span[aria-hidden="true"] {
    color: var(--connect-gold);
}

.connect-copyright {
    margin:
        8px
        0
        0;

    font-size: 0.61rem;
    font-weight: 300;

    color: rgba(247, 244, 237, 0.32);
}

.connect-legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 6px;

    font-size: 0.61rem;
    font-weight: 300;
}

.connect-legal-links a {
    color: rgba(247, 244, 237, 0.42);

    text-decoration: none;

    transition: color 180ms ease;
}

.connect-legal-links span {
    color: rgba(212, 175, 55, 0.55);
}

.connect-legal-links a:hover,
.connect-legal-links a:focus-visible {
    color: var(--connect-gold-soft);
    text-decoration: underline;
}

.connect-legal-links a:focus-visible {
    outline: 2px solid var(--connect-gold-soft);
    outline-offset: 3px;
}

/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.connect-action:focus-visible,
.connect-close:focus-visible {
    outline: 2px solid var(--connect-gold-soft);
    outline-offset: 3px;
}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 360px) {

    .connect-page {
        padding-left: 9px;
        padding-right: 9px;
    }

    .connect-card {
        padding:
            20px
            13px
            18px;

        border-radius: 22px;
    }

    .connect-brand {
        padding-left: 42px;
        padding-right: 42px;
    }

    .connect-logo {
        width: 72px;
        height: 72px;
    }

    .connect-action {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            20px;

        min-height: 64px;

        padding:
            9px
            10px;
    }

    .connect-action-icon {
        width: 35px;
        height: 35px;
    }

}


/* ==========================================================
   TABLET / DESKTOP
   ========================================================== */

@media (min-width: 640px) {

    .connect-page {
        align-items: center;

        padding:
            36px
            24px;
    }

    .connect-card {
        padding:
            30px
            28px
            25px;
    }

    .connect-logo {
        width: 90px;
        height: 90px;
    }

    .connect-action {
        min-height: 72px;

        padding:
            11px
            15px;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

}

/* assets/css/pages/connect.css */


/* ==========================================================
   FEEDBACK PANEL
   ========================================================== */

.connect-feedback {
    animation: connectFeedbackEnter 220ms ease;
}

.connect-feedback[hidden] {
    display: none;
}


/* ==========================================================
   FEEDBACK BACK
   ========================================================== */

.feedback-back {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin:
        2px
        0
        18px;

    padding: 6px 4px;

    color: var(--connect-text-muted);

    background: transparent;
    border: 0;

    font: inherit;
    font-size: 0.76rem;

    cursor: pointer;

    transition:
        color 180ms ease;
}

.feedback-back svg {
    width: 17px;
    height: 17px;
}

.feedback-back:hover,
.feedback-back:focus-visible {
    color: var(--connect-gold-soft);
}


/* ==========================================================
   FEEDBACK HEADING
   ========================================================== */

.feedback-heading {
    margin-bottom: 22px;

    text-align: center;
}

.feedback-heading h2 {
    margin: 0;

    font-family:
        "Cinzel",
        serif;

    font-size: 1.05rem;
    font-weight: 600;

    letter-spacing: 0.09em;

    color: var(--connect-gold-soft);

    text-transform: uppercase;
}

.feedback-heading p {
    max-width: 320px;

    margin:
        8px
        auto
        0;

    font-size: 0.75rem;
    font-weight: 300;

    line-height: 1.6;

    color: var(--connect-text-muted);
}


/* ==========================================================
   FEEDBACK FORM
   ========================================================== */

/* assets/css/pages/connect.css */

.feedback-form[hidden] {
    display: none;
}


/* ==========================================================
   RATING
   ========================================================== */

.feedback-rating-group {
    margin: 0;
    padding: 0;

    border: 0;

    text-align: center;
}

.feedback-rating-group legend {
    width: 100%;

    margin-bottom: 10px;

    font-size: 0.78rem;
    font-weight: 400;

    color: var(--connect-text);
}

.feedback-rating-group legend span,
.feedback-required {
    color: var(--connect-gold-soft);
}

.feedback-stars {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;
}

.feedback-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    padding: 0;

    color: rgba(247, 244, 237, 0.32);

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;

    cursor: pointer;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.feedback-star svg {
    width: 21px;
    height: 21px;
}

.feedback-star:hover,
.feedback-star:focus-visible,
.feedback-star.is-active {
    color: var(--connect-gold-soft);

    background: rgba(212, 175, 55, 0.09);

    border-color: rgba(212, 175, 55, 0.35);
}

.feedback-star:hover {
    transform: translateY(-1px);
}


/* ==========================================================
   FIELDS
   ========================================================== */

.feedback-field {
    display: grid;

    gap: 7px;
}

.feedback-field label {
    font-size: 0.73rem;
    font-weight: 400;

    color: var(--connect-text);
}

.feedback-field label > span:not(.feedback-required) {
    margin-left: 5px;

    font-size: 0.61rem;
    font-weight: 300;

    color: rgba(247, 244, 237, 0.4);
}

.feedback-field input,
.feedback-field textarea {
    width: 100%;

    padding:
        12px
        13px;

    color: var(--connect-text);

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;

    outline: none;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 0.78rem;

    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.feedback-field textarea {
    min-height: 105px;

    resize: vertical;

    line-height: 1.55;
}

.feedback-field input::placeholder,
.feedback-field textarea::placeholder {
    color: rgba(247, 244, 237, 0.28);
}

.feedback-field input:focus,
.feedback-field textarea:focus {
    background: rgba(255, 255, 255, 0.05);

    border-color: rgba(212, 175, 55, 0.45);

    box-shadow:
        0 0 0 3px rgba(212, 175, 55, 0.06);
}


/* ==========================================================
   FEEDBACK ERRORS
   ========================================================== */

.feedback-error {
    min-height: 0;

    margin: 0;

    font-size: 0.65rem;

    line-height: 1.4;

    color: #f2a6a6;
}

.feedback-error:empty {
    display: none;
}


/* ==========================================================
   HONEYPOT
   ========================================================== */

.feedback-honeypot {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    white-space: nowrap;
}


/* ==========================================================
   FORM STATUS
   ========================================================== */

.feedback-status {
    margin: 0;

    font-size: 0.69rem;

    line-height: 1.5;

    text-align: center;

    color: #f2a6a6;
}

.feedback-status:empty {
    display: none;
}


/* ==========================================================
   SUBMIT
   ========================================================== */

.feedback-submit,
.feedback-done {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    width: 100%;
    min-height: 50px;

    padding:
        12px
        18px;

    color: #15151f;

    background:
        linear-gradient(
            135deg,
            var(--connect-gold-soft),
            var(--connect-gold)
        );

    border: 0;
    border-radius: 14px;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 0.77rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease;
}

.feedback-submit svg {
    width: 17px;
    height: 17px;
}

.feedback-submit:hover,
.feedback-done:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 28px rgba(212, 175, 55, 0.16);
}

.feedback-submit:disabled {
    opacity: 0.55;

    cursor: wait;

    transform: none;

    box-shadow: none;
}


/* ==========================================================
   SUCCESS
   ========================================================== */

.feedback-success {
    padding:
        28px
        8px
        8px;

    text-align: center;

    animation: connectFeedbackEnter 220ms ease;
}

.feedback-success[hidden] {
    display: none;
}

.feedback-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin-bottom: 18px;

    color: var(--connect-gold-soft);

    background: rgba(212, 175, 55, 0.09);

    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 50%;
}

.feedback-success-icon svg {
    width: 28px;
    height: 28px;
}

.feedback-success h2 {
    margin: 0;

    font-family:
        "Cinzel",
        serif;

    font-size: 1.15rem;

    letter-spacing: 0.08em;

    color: var(--connect-gold-soft);

    text-transform: uppercase;
}

.feedback-success p {
    max-width: 320px;

    margin:
        12px
        auto
        24px;

    font-size: 0.75rem;
    font-weight: 300;

    line-height: 1.7;

    color: var(--connect-text-muted);
}


/* ==========================================================
   FEEDBACK ANIMATION
   ========================================================== */

@keyframes connectFeedbackEnter {

    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==========================================================
   SMALL MOBILE - FEEDBACK
   ========================================================== */

@media (max-width: 360px) {

    .feedback-stars {
        gap: 6px;
    }

    .feedback-star {
        width: 39px;
        height: 39px;
    }

}