/* =====================================================
   TopherNet — Domain Parking Page
   parking.css  |  Dark theme  |  teal/cyan palette
   ===================================================== */

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

:root {
    --tn-bg-page:        #0d1117;
    --tn-bg-card:        #111c22;
    --tn-bg-input:       #0d1117;
    --tn-border:         #1e3a42;
    --tn-border-mid:     #2a5060;

    --tn-teal:           #0dd3e0;
    --tn-teal-dark:      #0e7490;
    --tn-teal-ring:      rgba(13,211,224,0.22);

    --tn-text-bright:    #e0f7fa;
    --tn-text-mid:       #7ecad4;
    --tn-text-dim:       #4a9ead;
    --tn-text-ghost:     #2e5a66;

    --tn-radius-sm:      6px;
    --tn-radius-md:      10px;
    --tn-radius-lg:      16px;

    /* Status tokens */
    --forsale-bar:       #0e9aa7;
    --forsale-icon-bg:   rgba(14,154,167,0.15);
    --forsale-icon-bdr:  rgba(14,154,167,0.35);
    --forsale-icon-fg:   #0dd3e0;
    --forsale-badge-bg:  rgba(13,211,224,0.10);
    --forsale-badge-fg:  #0dd3e0;
    --forsale-badge-bdr: rgba(13,211,224,0.25);

    --parked-bar:        #d4a017;
    --parked-icon-bg:    rgba(212,160,23,0.12);
    --parked-icon-bdr:   rgba(212,160,23,0.30);
    --parked-icon-fg:    #f5c842;
    --parked-badge-bg:   rgba(245,200,66,0.10);
    --parked-badge-fg:   #f5c842;
    --parked-badge-bdr:  rgba(245,200,66,0.25);

    --expired-bar:       #c0392b;
    --expired-icon-bg:   rgba(192,57,43,0.12);
    --expired-icon-bdr:  rgba(192,57,43,0.30);
    --expired-icon-fg:   #e74c3c;
    --expired-badge-bg:  rgba(231,76,60,0.10);
    --expired-badge-fg:  #e74c3c;
    --expired-badge-bdr: rgba(231,76,60,0.25);

    --other-bar:         #5b6abf;
    --other-icon-bg:     rgba(91,106,191,0.12);
    --other-icon-bdr:    rgba(91,106,191,0.30);
    --other-icon-fg:     #8a96e8;
    --other-badge-bg:    rgba(138,150,232,0.10);
    --other-badge-fg:    #8a96e8;
    --other-badge-bdr:   rgba(138,150,232,0.25);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--tn-bg-page);
    color: var(--tn-text-bright);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.parking-card {
    background: var(--tn-bg-card);
    border-radius: var(--tn-radius-lg);
    border: 1px solid var(--tn-border);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    position: relative;
}

.status-bar {
    display: block;
    height: 3px;
    width: 100%;
}
.status-forsale  .status-bar { background: var(--forsale-bar); }
.status-parked   .status-bar { background: var(--parked-bar); }
.status-expired  .status-bar { background: var(--expired-bar); }
.status-other    .status-bar { background: var(--other-bar); }

.card-inner {
    padding: 2.5rem 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Logo */
.logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2.25rem;
    text-decoration: none;
}

.logo-area img.logo-img {
    height: 46px;
    width: auto;
    object-fit: contain;
}

.logo-mark {
    width: 40px;
    height: 40px;
    border-radius: var(--tn-radius-md);
    background: var(--tn-teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-mark svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: var(--tn-text-bright);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.logo-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--tn-text-bright);
    letter-spacing: 0.5px;
}

/* Status icon */
.status-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.status-forsale .status-icon { background: var(--forsale-icon-bg); border-color: var(--forsale-icon-bdr); }
.status-parked  .status-icon { background: var(--parked-icon-bg);  border-color: var(--parked-icon-bdr);  }
.status-expired .status-icon { background: var(--expired-icon-bg); border-color: var(--expired-icon-bdr); }
.status-other   .status-icon { background: var(--other-icon-bg);   border-color: var(--other-icon-bdr);   }

.status-icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.status-forsale .status-icon svg { stroke: var(--forsale-icon-fg); }
.status-parked  .status-icon svg { stroke: var(--parked-icon-fg);  }
.status-expired .status-icon svg { stroke: var(--expired-icon-fg); }
.status-other   .status-icon svg { stroke: var(--other-icon-fg);   }

/* Copy */
.page-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--tn-text-bright);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.page-subtitle {
    font-size: 14px;
    color: var(--tn-text-mid);
    line-height: 1.8;
    max-width: 400px;
    margin-bottom: 1.25rem;
}

/* Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid transparent;
    margin-bottom: 1.75rem;
}

.status-forsale .status-badge { background: var(--forsale-badge-bg); color: var(--forsale-badge-fg); border-color: var(--forsale-badge-bdr); }
.status-parked  .status-badge { background: var(--parked-badge-bg);  color: var(--parked-badge-fg);  border-color: var(--parked-badge-bdr);  }
.status-expired .status-badge { background: var(--expired-badge-bg); color: var(--expired-badge-fg); border-color: var(--expired-badge-bdr); }
.status-other   .status-badge { background: var(--other-badge-bg);   color: var(--other-badge-fg);   border-color: var(--other-badge-bdr);   }

/* Divider */
.card-divider {
    width: 100%;
    height: 1px;
    background: var(--tn-border);
    margin-bottom: 1.5rem;
}

/* Contact form */
.contact-form {
    width: 100%;
    max-width: 360px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tn-text-dim);
}

.form-group input,
.form-group textarea {
    padding: 9px 12px;
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius-sm);
    font-size: 13px;
    color: var(--tn-text-bright);
    background: var(--tn-bg-input);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--tn-text-ghost); }

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--tn-border-mid);
    box-shadow: 0 0 0 3px var(--tn-teal-ring);
}

.form-group textarea {
    height: 88px;
    resize: vertical;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    padding: 11px 28px;
    background: var(--tn-teal-dark);
    color: var(--tn-text-bright);
    border: none;
    border-radius: var(--tn-radius-md);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s, transform .1s;
    margin-top: 4px;
    align-self: flex-start;
    font-family: inherit;
}

.btn-primary:hover  { opacity: 0.85; }
.btn-primary:active { transform: scale(0.98); }

.btn-primary.centered {
    align-self: center;
    margin-top: 0;
}

/* Domain label (inside card) */
.domain-footer {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tn-border);
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: var(--tn-text-ghost);
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: 0.04em;
}

/* Page footer */
.page-footer {
    margin-top: 1.5rem;
    font-size: 12px;
    color: var(--tn-text-ghost);
    text-align: center;
}

.page-footer a { color: var(--tn-text-dim); text-decoration: none; transition: color .15s; }
.page-footer a:hover { color: var(--tn-teal); }

/* Responsive */
@media (max-width: 480px) {
    .card-inner               { padding: 2rem 1.25rem 1.5rem; }
    .page-title               { font-size: 19px; }
    .contact-form             { max-width: 100%; }
    .btn-primary.centered     { width: 100%; text-align: center; }
}