/* ==========================================================================
   Trip request (tourist RFQ form) — redesign
   Site palette: navy #1e3a5f, teal #2d7a8c, orange #ff6b35.
   Fonts: Sora (display) + Plus Jakarta Sans (body). All classes are tr-*.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
    --tr-navy: #1e3a5f;
    --tr-navy-deep: #12293f;
    --tr-teal: #2d7a8c;
    --tr-teal-soft: #e7f1f4;
    --tr-orange: #ff6b35;
    --tr-orange-dark: #ec5828;
    --tr-bg: #eef3f9;
    --tr-border: #e0e8f1;
    --tr-border-strong: #d3ddea;
    --tr-ink: #22303f;
    --tr-muted: #5f7085;
    --tr-faint: #8494a6;
    --tr-ring: rgba(45, 122, 140, 0.16);
}

/* ---- Hero ---- */
.tr-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 380px at 15% -40%, rgba(255, 107, 53, 0.30), transparent 60%),
        linear-gradient(120deg, var(--tr-navy-deep) 0%, var(--tr-navy) 45%, var(--tr-teal) 115%);
    color: #fff;
    padding: 44px 20px 62px;
    text-align: center;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.tr-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.10) 0, transparent 40%),
        radial-gradient(circle at 68% 130%, rgba(255, 255, 255, 0.08) 0, transparent 42%);
    pointer-events: none;
}
.tr-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.tr-hero-badge {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 26px;
    color: #fff;
    background: linear-gradient(135deg, var(--tr-orange) 0%, var(--tr-orange-dark) 100%);
    box-shadow: 0 12px 26px rgba(255, 107, 53, 0.42);
}
.tr-hero h1 {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    line-height: 1.12;
}
.tr-hero p { font-size: 1.02rem; color: rgba(255, 255, 255, 0.85); max-width: 640px; margin: 0 auto; line-height: 1.55; }

.tr-hero-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-top: 22px;
}
.tr-hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 8px 14px;
    border-radius: 30px;
}
.tr-hero-trust span i { color: #ffd9c9; }

/* ---- Layout ---- */
.tr-wrap {
    max-width: 1180px;
    margin: -34px auto 56px;
    padding: 0 16px;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: relative;
    z-index: 2;
}
.tr-card {
    background: #fff;
    border: 1px solid var(--tr-border);
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(18, 41, 63, 0.10);
    padding: 30px 32px 32px;
}

.tr-board { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 34px; align-items: start; }
.tr-section { margin: 0; min-width: 0; }
.tr-section.tr-span2 { grid-column: 1 / -1; }

/* Section header with icon chip */
.tr-section h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Sora', sans-serif;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--tr-navy);
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tr-border);
    letter-spacing: -0.01em;
}
.tr-section h3 .tr-ic {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--tr-navy) 0%, var(--tr-teal) 100%);
    box-shadow: 0 6px 14px rgba(30, 58, 95, 0.22);
}
.tr-section h3 .tr-ic i { color: #fff; }

/* ---- Fields ---- */
.tr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 14px 16px; }
.tr-field { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.tr-field label { font-weight: 600; color: #3f4f61; margin-bottom: 7px; font-size: 0.82rem; }
.tr-field input, .tr-field select, .tr-field textarea {
    padding: 12px 14px;
    border: 1.5px solid var(--tr-border-strong);
    border-radius: 11px;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--tr-ink);
    width: 100%;
    box-sizing: border-box;
    background: #fbfdff;
    transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.tr-field textarea { resize: vertical; min-height: 108px; line-height: 1.55; }
.tr-field input:focus, .tr-field select:focus, .tr-field textarea:focus {
    outline: none;
    border-color: var(--tr-teal);
    background: #fff;
    box-shadow: 0 0 0 4px var(--tr-ring);
}
.tr-field input::placeholder, .tr-field textarea::placeholder { color: #a6b2c1; }
.tr-grid + .tr-field { margin-top: 14px; }
.tr-field select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f7085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; cursor: pointer;
}

/* Date fields */
.tr-field input[type="date"] { cursor: pointer; }
.tr-field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.65; }
.tr-field input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 1; }
.tr-hint { font-size: 0.75rem; color: var(--tr-faint); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.tr-hint i { color: var(--tr-teal); }

/* ---- Checkbox pills (icon + label + check) ---- */
.tr-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.tr-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1.5px solid var(--tr-border-strong);
    border-radius: 12px;
    cursor: pointer;
    background: #fbfdff;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
    font-size: 0.88rem;
    color: var(--tr-ink);
}
.tr-check:hover { border-color: var(--tr-teal); background: #f4fafb; transform: translateY(-1px); }
.tr-check input { position: absolute; opacity: 0; pointer-events: none; }
.tr-check .tr-check-ic { width: 22px; flex-shrink: 0; text-align: center; color: var(--tr-teal); font-size: 15px; transition: color 0.15s; }
.tr-check span { line-height: 1.25; font-weight: 500; }
.tr-check::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: auto;
    font-size: 11px;
    color: transparent;
    transition: color 0.15s;
    flex-shrink: 0;
}
.tr-check:has(input:checked) {
    border-color: var(--tr-teal);
    background: var(--tr-teal-soft);
    box-shadow: inset 0 0 0 1px var(--tr-teal);
}
.tr-check:has(input:checked) span { color: var(--tr-navy); font-weight: 600; }
.tr-check:has(input:checked) .tr-check-ic { color: var(--tr-navy); }
.tr-check:has(input:checked)::after { color: var(--tr-teal); }

/* Flexible-dates toggle uses the same pill */
.tr-check-inline { max-width: 300px; margin-top: 14px; }

.tr-required { color: var(--tr-orange); font-weight: 700; }

/* ---- Actions ---- */
.tr-actions { margin-top: 28px; }
.tr-submit {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--tr-orange) 0%, var(--tr-orange-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 13px;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 12px 26px rgba(255, 107, 53, 0.34);
    transition: transform 0.16s, box-shadow 0.16s, filter 0.16s;
}
.tr-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(255, 107, 53, 0.44); filter: brightness(1.03); }
.tr-note { font-size: 0.82rem; color: var(--tr-muted); margin: 12px 0 0; text-align: center; display: flex; align-items: center; justify-content: center; gap: 7px; }
.tr-note i { color: var(--tr-teal); }
.tr-hp { position: absolute; left: -9999px; }

@media (max-width: 860px) { .tr-board { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 640px) {
    .tr-checks { grid-template-columns: 1fr 1fr; }
    .tr-hero h1 { font-size: 1.7rem; }
    .tr-card { padding: 22px 18px; border-radius: 18px; }
    .tr-wrap { margin-top: -28px; }
}
@media (max-width: 420px) { .tr-checks { grid-template-columns: 1fr; } }