/* ==================================================
   THEPETGRID
   C-010 — UPLOAD PAGE
================================================== */


/* ==================================================
   VARIABLES
================================================== */

:root {

    --color-primary: #ff8a00;
    --color-primary-dark: #e86f00;
    --color-secondary: #ffb703;

    --color-text: #1f2937;
    --color-text-soft: #6b7280;
    --color-border: rgba(31, 41, 55, 0.12);

    --color-white: #ffffff;
    --color-background: #fffaf3;
    --color-background-soft: #fff4df;

    --color-success: #15803d;
    --color-success-background: #dcfce7;

    --color-error: #dc2626;
    --color-error-background: #fee2e2;

    --shadow-small:
        0 8px 24px rgba(31, 41, 55, 0.08);

    --shadow-medium:
        0 18px 50px rgba(31, 41, 55, 0.12);

    --shadow-large:
        0 30px 80px rgba(31, 41, 55, 0.16);

    --radius-small: 12px;
    --radius-medium: 20px;
    --radius-large: 28px;

}


/* ==================================================
   RESET
================================================== */

*,
*::before,
*::after {

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    margin: 0;

    min-height: 100vh;

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

    color:
        var(--color-text);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(255, 183, 3, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(255, 138, 0, 0.15),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fffdf9 0%,
            var(--color-background) 100%
        );

}

img {

    display: block;

    max-width: 100%;

}

button,
input,
select,
textarea {

    font: inherit;

}

button,
select {

    cursor: pointer;

}

a {

    color: inherit;

    text-decoration: none;

}


/* ==================================================
   HEADER
================================================== */

.main-header {

    position: sticky;
    top: 0;
    z-index: 100;

    border-bottom:
        1px solid rgba(255, 138, 0, 0.12);

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

    backdrop-filter:
        blur(18px);

}

.main-header__inner {

    width:
        min(1180px, calc(100% - 40px));

    min-height: 76px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

}

.main-header__logo {

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

    gap: 10px;

    font-size: 1.35rem;
    font-weight: 800;

    letter-spacing: -0.03em;

}

.main-header__logo span {

    width: 42px;
    height: 42px;

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

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--color-secondary),
            var(--color-primary)
        );

    box-shadow:
        0 10px 24px rgba(255, 138, 0, 0.25);

}

.main-header__nav {

    display: flex;
    align-items: center;

    gap: 10px;

}

.main-header__nav a {

    padding:
        10px 15px;

    border-radius: 999px;

    color:
        var(--color-text-soft);

    font-weight: 600;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;

}

.main-header__nav a:hover {

    color:
        var(--color-primary-dark);

    background:
        rgba(255, 138, 0, 0.08);

    transform:
        translateY(-1px);

}

.main-header__nav a.is-active {

    color:
        var(--color-white);

    background:
        linear-gradient(
            135deg,
            var(--color-secondary),
            var(--color-primary)
        );

    box-shadow:
        0 10px 22px rgba(255, 138, 0, 0.22);

}


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

.upload-page {

    min-height:
        calc(100vh - 76px);

}


/* ==================================================
   HERO
================================================== */

.upload-hero {

    padding:
        72px 20px 44px;

}

.upload-hero__content {

    width:
        min(880px, 100%);

    margin:
        0 auto;

    text-align: center;

}

.upload-hero__badge {

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

    gap: 8px;

    padding:
        9px 15px;

    margin-bottom: 20px;

    border:
        1px solid rgba(255, 138, 0, 0.18);

    border-radius: 999px;

    color:
        var(--color-primary-dark);

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

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

    font-size: 0.92rem;
    font-weight: 700;

}

.upload-hero h1 {

    margin:
        0;

    font-size:
        clamp(2.4rem, 6vw, 4.8rem);

    line-height: 1.02;

    letter-spacing: -0.055em;

}

.upload-hero h1 span {

    display: inline-block;

    color:
        var(--color-primary);

}

.upload-hero p {

    max-width: 660px;

    margin:
        22px auto 0;

    color:
        var(--color-text-soft);

    font-size:
        clamp(1rem, 2vw, 1.18rem);

    line-height: 1.75;

}


/* ==================================================
   UPLOAD SECTION
================================================== */

.upload-section {

    padding:
        20px 20px 90px;

}

.upload-layout {

    width:
        min(1180px, 100%);

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(320px, 0.75fr);

    gap: 30px;

    align-items: start;

}


/* ==================================================
   UPLOAD CARD
================================================== */

.upload-card {

    padding:
        clamp(24px, 4vw, 40px);

    border:
        1px solid rgba(255, 255, 255, 0.85);

    border-radius:
        var(--radius-large);

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

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

    backdrop-filter:
        blur(20px);

}

.upload-card__header {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 32px;

}

.upload-card__eyebrow,
.preview-panel__eyebrow {

    display: inline-block;

    margin-bottom: 8px;

    color:
        var(--color-primary-dark);

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

    letter-spacing: 0.12em;
    text-transform: uppercase;

}

.upload-card__header h2,
.preview-panel__header h2 {

    margin:
        0;

    font-size:
        clamp(1.55rem, 3vw, 2.1rem);

    letter-spacing: -0.035em;

}

.upload-card__header p,
.preview-panel__header p {

    margin:
        10px 0 0;

    color:
        var(--color-text-soft);

    line-height: 1.65;

}


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

.upload-form__grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px;

}

.form-group {

    display: flex;
    flex-direction: column;

    gap: 9px;

}

.form-group--full {

    margin-top: 24px;

}

.form-group label {

    color:
        var(--color-text);

    font-size: 0.94rem;
    font-weight: 700;

}

.form-label-row {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

}

.form-label-row span {

    color:
        var(--color-text-soft);

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

}

.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-small);

    outline: none;

    color:
        var(--color-text);

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

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;

}

.form-group input,
.form-group select {

    min-height: 52px;

    padding:
        0 15px;

}

.form-group textarea {

    min-height: 132px;

    padding:
        15px;

    resize: vertical;

    line-height: 1.6;

}

.form-group input::placeholder,
.form-group textarea::placeholder {

    color:
        #9ca3af;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color:
        rgba(255, 138, 0, 0.72);

    background:
        var(--color-white);

    box-shadow:
        0 0 0 4px rgba(255, 138, 0, 0.12);

}

.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {

    border-color:
        var(--color-error);

    background:
        #fffafa;

    box-shadow:
        0 0 0 4px rgba(220, 38, 38, 0.08);

}

.form-error {

    min-height: 18px;

    color:
        var(--color-error);

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

}


/* ==================================================
   IMAGE DROPZONE
================================================== */

.image-dropzone {

    position: relative;

    overflow: hidden;

    border:
        2px dashed rgba(255, 138, 0, 0.32);

    border-radius:
        var(--radius-medium);

    background:
        linear-gradient(
            145deg,
            rgba(255, 183, 3, 0.08),
            rgba(255, 138, 0, 0.05)
        );

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;

}

.image-dropzone:hover,
.image-dropzone.is-dragover {

    border-color:
        var(--color-primary);

    background:
        linear-gradient(
            145deg,
            rgba(255, 183, 3, 0.14),
            rgba(255, 138, 0, 0.1)
        );

    transform:
        translateY(-2px);

}

.image-dropzone input {

    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;

}

.image-dropzone__label {

    min-height: 190px;

    padding:
        30px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 9px;

    text-align: center;

    cursor: pointer;

}

.image-dropzone__icon {

    width: 62px;
    height: 62px;

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

    margin-bottom: 4px;

    border-radius: 20px;

    background:
        var(--color-white);

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

    font-size: 1.8rem;

}

.image-dropzone__label strong {

    font-size: 1.05rem;

}

.image-dropzone__label span:last-child {

    color:
        var(--color-text-soft);

    font-size: 0.88rem;

}


/* ==================================================
   MESSAGE
================================================== */

.upload-message {

    margin-top: 24px;

    padding:
        15px 18px;

    border-radius:
        var(--radius-small);

    font-weight: 700;
    line-height: 1.5;

}

.upload-message.is-success {

    color:
        var(--color-success);

    background:
        var(--color-success-background);

}

.upload-message.is-error {

    color:
        var(--color-error);

    background:
        var(--color-error-background);

}


/* ==================================================
   FORM ACTIONS
================================================== */

.upload-form__actions {

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

    gap: 13px;

    margin-top: 30px;

}

.button {

    min-height: 50px;

    padding:
        0 22px;

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

    gap: 8px;

    border: none;

    border-radius: 999px;

    font-weight: 800;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;

}

.button:hover {

    transform:
        translateY(-2px);

}

.button:active {

    transform:
        translateY(0);

}

.button--primary {

    color:
        var(--color-white);

    background:
        linear-gradient(
            135deg,
            var(--color-secondary),
            var(--color-primary)
        );

    box-shadow:
        0 14px 30px rgba(255, 138, 0, 0.28);

}

.button--primary:hover {

    box-shadow:
        0 18px 36px rgba(255, 138, 0, 0.36);

}

.button--secondary {

    color:
        var(--color-text);

    border:
        1px solid var(--color-border);

    background:
        var(--color-white);

}

.button:disabled {

    cursor: not-allowed;

    opacity: 0.65;

    transform: none;

}


/* ==================================================
   PREVIEW PANEL
================================================== */

.preview-panel {

    position: sticky;
    top: 105px;

    padding:
        28px;

    border:
        1px solid rgba(255, 255, 255, 0.85);

    border-radius:
        var(--radius-large);

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

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

    backdrop-filter:
        blur(18px);

}

.preview-panel__header {

    margin-bottom: 22px;

}


/* ==================================================
   PREVIEW CARD
================================================== */

.upload-preview-card {

    overflow: hidden;

    border:
        1px solid rgba(31, 41, 55, 0.1);

    border-radius:
        24px;

    background:
        var(--color-white);

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

}

.upload-preview-card__media {

    position: relative;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #fff5dc,
            #ffe3b1
        );

}

.upload-preview-card__media img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.upload-preview-card__placeholder {

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 20px;

    text-align: center;

    color:
        var(--color-text-soft);

}

.upload-preview-card__placeholder span {

    font-size: 3.2rem;

}

.upload-preview-card__placeholder p {

    margin: 0;

    font-weight: 600;

}

.upload-preview-card__verified {

    position: absolute;
    top: 14px;
    left: 14px;

    padding:
        7px 11px;

    border-radius: 999px;

    color:
        var(--color-white);

    background:
        rgba(21, 128, 61, 0.92);

    font-size: 0.76rem;
    font-weight: 800;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.14);

}

.upload-preview-card__content {

    padding:
        22px;

}

.upload-preview-card__type {

    margin:
        0 0 7px;

    color:
        var(--color-primary-dark);

    font-size: 0.83rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.06em;

}

.upload-preview-card h3 {

    margin:
        0 0 14px;

    font-size: 1.65rem;

    letter-spacing: -0.035em;

}

.upload-preview-card__location,
.upload-preview-card__owner {

    margin:
        7px 0;

    color:
        var(--color-text-soft);

    line-height: 1.5;

}

.upload-preview-card__stats {

    margin-top: 20px;

    padding-top: 18px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    border-top:
        1px solid var(--color-border);

}

.upload-preview-card__stats div {

    text-align: center;

}

.upload-preview-card__stats strong {

    display: block;

    margin-bottom: 3px;

    font-size: 1.05rem;

}

.upload-preview-card__stats span {

    color:
        var(--color-text-soft);

    font-size: 0.76rem;

}


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

.main-footer {

    padding:
        28px 20px;

    border-top:
        1px solid rgba(31, 41, 55, 0.08);

    color:
        var(--color-text-soft);

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

    text-align: center;

}

.main-footer p {

    margin: 0;

}


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

:focus-visible {

    outline:
        3px solid rgba(255, 138, 0, 0.42);

    outline-offset: 3px;

}


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

@media (max-width: 980px) {

    .upload-layout {

        grid-template-columns:
            1fr;

    }

    .preview-panel {

        position: static;

        width:
            min(520px, 100%);

        margin:
            0 auto;

    }

}


@media (max-width: 720px) {

    .main-header__inner {

        min-height: auto;

        padding:
            16px 0;

        flex-direction: column;

    }

    .main-header__nav {

        width: 100%;

        justify-content: center;
        flex-wrap: wrap;

    }

    .upload-hero {

        padding:
            52px 18px 32px;

    }

    .upload-section {

        padding:
            12px 14px 60px;

    }

    .upload-form__grid {

        grid-template-columns:
            1fr;

    }

    .upload-card,
    .preview-panel {

        border-radius:
            22px;

    }

}


@media (max-width: 520px) {

    .main-header__inner {

        width:
            min(100% - 24px, 1180px);

    }

    .main-header__nav a {

        padding:
            8px 11px;

        font-size: 0.9rem;

    }

    .upload-card {

        padding:
            22px 18px;

    }

    .preview-panel {

        padding:
            22px 18px;

    }

    .upload-form__actions {

        flex-direction: column-reverse;

    }

    .button {

        width: 100%;

    }

    .image-dropzone__label {

        min-height: 170px;

        padding:
            24px 18px;

    }

}


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

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

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

    }

}
/* ==================================================
   v3.1.2 — UNIFIED PREMIUM PET CARD PREVIEW
================================================== */
.preview-panel{position:sticky;top:98px}.upload-preview-card{overflow:hidden;border:1px solid rgba(15,23,42,.09);border-radius:24px;background:#fff;box-shadow:0 18px 48px rgba(15,23,42,.11);transition:transform .25s ease,box-shadow .25s ease}.upload-preview-card:hover{transform:translateY(-6px);box-shadow:0 26px 58px rgba(15,23,42,.15)}.upload-preview-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#eef2f7}.upload-preview-card__media>img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.upload-preview-card:hover .upload-preview-card__media>img{transform:scale(1.05)}.upload-preview-card__placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#94a3b8;background:linear-gradient(145deg,#fff8ea,#f1f5f9)}.upload-preview-card__placeholder span{font-size:3rem}.upload-preview-card__placeholder p{margin:8px 0 0}.upload-preview-card__verified{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(37,99,235,.92);color:#fff;font-size:.72rem;font-weight:850;backdrop-filter:blur(8px)}.upload-preview-card__content{padding:20px}.upload-preview-card__type{margin:0 0 6px!important;color:#ff7a00!important;font-size:.72rem!important;font-weight:850!important;letter-spacing:.09em;text-transform:uppercase}.upload-preview-card__content h3{margin:0;color:#172033;font-size:1.45rem;line-height:1.12}.upload-preview-card__location,.upload-preview-card__owner{margin:10px 0 0!important;color:#475569!important;font-size:.9rem!important;font-weight:600}.upload-preview-card__stats{display:flex!important;gap:8px!important;margin-top:17px!important}.upload-preview-card__stats>div{flex:1;min-width:0;padding:9px 5px!important;border:1px solid rgba(15,23,42,.07)!important;border-radius:10px!important;background:#f8fafc!important;text-align:center}.upload-preview-card__stats strong{display:block;color:#172033}.upload-preview-card__stats span{display:block;margin-top:2px;color:#64748b;font-size:.7rem}.upload-preview-card::after{content:"View Profile";display:flex;align-items:center;justify-content:center;min-height:44px;margin:0 20px 20px;border-radius:12px;background:linear-gradient(135deg,#ffb020,#ff7a00);color:#fff;font-weight:850;box-shadow:0 10px 22px rgba(255,122,0,.2)}
@media(max-width:900px){.preview-panel{position:static}.upload-layout{grid-template-columns:1fr}.preview-panel{max-width:560px;width:100%;margin:0 auto}}

/* Sprint 5.6 — Location Picker */
.location-picker-card{grid-column:1/-1;padding:18px;border:1px solid rgba(249,115,22,.22);border-radius:20px;background:linear-gradient(180deg,#fff,#fffaf3)}
.location-picker__header strong{display:block;font-size:1.05rem;color:#1f2937}.location-picker__header small{display:block;margin-top:4px;color:#6b7280}
.location-picker__search{display:grid;grid-template-columns:1fr auto;gap:10px;margin:14px 0}.location-picker__search input{min-width:0}
.pet-location-map{height:360px;border-radius:16px;overflow:hidden;border:1px solid #e5e7eb;background:#eef2f7;z-index:1}
.location-picker__status{margin:10px 2px 0;color:#6b7280;font-size:.9rem}.location-picker__status.is-success{color:#15803d}.location-picker__status.is-error{color:#b91c1c}
@media(max-width:700px){.location-picker__search{grid-template-columns:1fr}.pet-location-map{height:300px}}