/* ==========================================================================
   Tanzania Beach Safaris — Get a Quote page styling.
   Loaded only on Get-a-Quote.php, after the base theme stylesheet
   (assets/css/app.css), so these rules override/extend it without
   touching the shared theme file. Extracted from an inline <style>
   block that used to sit directly in Get-a-Quote.php.
   ========================================================================== */

        :root {
          --color-white: #FFFFFF;
          --color-black: #000000;
          --color-border: #DDDDDD;
          --color-dark: #1B4F4A;
          --color-light-1: #697488;
          --color-light-2: #F5F5F5;
          --color-light-3: #FBFCFF;
          --color-primary: #C1622D;
          --color-blue-2: #E5F0FD;
          --color-green-1: #EBFCEA;
          --color-green-2: #008009;
          --color-yellow: #ffbe3d;
          --color-brown-1: #923E01;
          --color-purple-1: #7E53F9;
          --color-red-1: #D93025;
          --color-red-2: #F1416C;
          --color-red-3: #FFF5F8;
          --color-info-1: #CDE9F6;
          --color-info-2: #4780AA;
          --color-warning-1: #F7F3D7;
          --color-warning-2: #927238;
          --color-error-1: #ECC8C5;
          --color-error-2: #AB3331;
          --color-success-1: #DEF2D7;
          --color-success-2: #5B7052;
          --color-secondary: #1B4F4A;
          --color-text: #4F545A;
          --color-head: #1B4F4A;
          --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.08);
          --radius-xl: 26px;
        }

        /* HERO SECTION */
        .page-hero {
          position: relative;
          background-size: cover;
          background-position: center center;
          background-repeat: no-repeat;
          padding: 130px 0 90px;
          color: var(--color-white);
        }
        .page-hero::before {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(135deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.35));
        }
        .page-hero .container { position: relative; z-index: 2; }
        .page-hero-content { max-width: 760px; }

        .page-hero-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 8px 16px;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.12);
          font-size: 11px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1.8px;
          margin-bottom: 14px;
          color: var(--color-white);
        }
        .page-hero-badge i { color: var(--color-secondary); }

        .page-hero-title {
          font-size: 2.7rem;
          font-weight: 700;
          margin-bottom: 10px;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
          color: var(--color-white);
        }
        .page-hero-subtitle {
          font-size: 0.98rem;
          max-width: 560px;
          color: rgba(255, 255, 255, 0.85);
          margin-bottom: 18px;
        }
        .page-hero-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          font-size: 12px;
        }
        .page-hero-meta span {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 12px;
          border-radius: 50px;
          background: rgba(0, 0, 0, 0.35);
          border: 1px solid rgba(255, 255, 255, 0.12);
        }
        .page-hero-meta i { color: var(--color-secondary); }

        /* FORM ALERTS */
        .form-alert {
          padding: 10px 12px;
          border-radius: 10px;
          font-size: 13px;
          margin-bottom: 16px;
          display: flex;
          align-items: flex-start;
          gap: 8px;
        }
        .form-alert i { margin-top: 2px; flex-shrink: 0; }
        .form-alert-success {
          background: var(--color-success-1);
          border: 1px solid rgba(91, 112, 82, 0.35);
          color: var(--color-success-2);
        }
        .form-alert-error {
          background: var(--color-red-3);
          border: 1px solid var(--color-red-2);
          color: var(--color-red-1);
        }

        /* QUOTE FORM CARD */
        .quote-form-card {
          background: var(--color-white);
          border-radius: var(--radius-xl);
          padding: 26px 24px 24px;
          box-shadow: var(--shadow-soft);
          border: 1px solid var(--color-border);
        }
        .quote-form-header {
          margin-bottom: 18px;
          border-bottom: 1px solid #f1f5f9;
          padding-bottom: 10px;
        }
        .quote-form-eyebrow {
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 1.6px;
          color: var(--color-secondary);
          font-weight: 600;
          margin-bottom: 4px;
        }
        .quote-form-title {
          font-size: 1.5rem;
          font-weight: 700;
          color: var(--color-head);
          margin-bottom: 4px;
        }
        .quote-form-subtitle {
          font-size: 13px;
          color: var(--color-light-1);
          margin-bottom: 0;
        }
        .quote-form-steps {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-top: 14px;
        }
        .quote-step {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 6px 10px;
          border-radius: 999px;
          background: var(--color-light-3);
          font-size: 11px;
          color: var(--color-text);
        }
        .quote-step-badge {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: var(--color-primary);
          color: var(--color-white);
          font-size: 11px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
        }

        /* SECTION TITLES & GRIDS */
        .quote-form-section-title {
          font-size: 13px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1.3px;
          color: var(--color-light-1);
          margin: 18px 0 8px;
        }
        .quote-form-grid-2 {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 16px;
        }
        .quote-form-grid-3 {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 16px;
        }

        /* INPUTS */
        .quote-input-wrap label,
        .quote-input-wrap .label {
          font-size: 13px;
          font-weight: 600;
          color: var(--color-head);
          margin-bottom: 6px;
          display: block;
        }
        .quote-input,
        .quote-select,
        .quote-textarea {
          width: 100%;
          border-radius: 10px;
          border: 1.5px solid #cbd5e1;
          padding: 10px 11px;
          font-size: 13px;
          background-color: var(--color-white);
          color: var(--color-text);
          transition: all 0.2s ease;
          box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
        }
        .quote-textarea { min-height: 110px; resize: vertical; }
        .quote-input::placeholder,
        .quote-textarea::placeholder { color: #9ca3af; }
        .quote-input:focus,
        .quote-select:focus,
        .quote-textarea:focus {
          outline: none;
          border-color: var(--color-primary);
          box-shadow: 0 0 0 2px rgba(193, 98, 45, 0.12);
          background-color: var(--color-white);
        }

        /* CHIPS */
        .quote-chip-group {
          display: flex;
          flex-wrap: wrap;
          gap: 8px 14px;
        }
        .quote-chip-group .checkbox,
        .quote-chip-group .radio-button { margin-bottom: 0; }
        .quote-chip-group label {
          border-radius: 999px;
          border: 1px solid #e5e7eb;
          padding: 6px 12px;
          font-size: 12px;
          cursor: pointer;
          background: var(--color-light-3);
          color: var(--color-text);
          transition: all 0.2s ease;
        }
        .quote-chip-group input[type="checkbox"],
        .quote-chip-group input[type="radio"] { display: none; }
        .quote-chip-group input:checked + label {
          background: var(--color-primary);
          border-color: var(--color-primary);
          color: var(--color-white);
          box-shadow: 0 10px 20px rgba(193, 98, 45, 0.35);
        }

        /* SMALL TEXT */
        .quote-notice {
          font-size: 12px;
          color: var(--color-light-1);
          margin-top: 4px;
        }

        /* SUBMIT BUTTON */
        .quote-submit-btn {
          width: 100%;
          border-radius: 999px;
          background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
          border: none;
          padding: 12px 18px;
          font-size: 13px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: var(--color-white);
          margin-top: 6px;
          box-shadow: 0 12px 28px rgba(193, 98, 45, 0.35);
          transition: all 0.25s ease;
        }
        .quote-submit-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 14px 32px rgba(193, 98, 45, 0.45);
        }

        /* TERMS */
        .quote-terms {
          font-size: 12px;
          color: var(--color-light-1);
        }
        .quote-terms a { color: var(--color-primary); text-decoration: none; }
        .quote-terms a:hover { text-decoration: underline; }

        /* RESPONSIVE */
        @media (max-width: 992px) {
          .page-hero { padding: 110px 0 70px; }
          .page-hero-title { font-size: 2.1rem; }
        }
        @media (max-width: 768px) {
          .page-hero { padding: 100px 0 60px; }
          .page-hero-title { font-size: 1.9rem; }
          .quote-form-card { padding: 22px 16px 20px; margin: 0 -8px; }
          .quote-form-grid-2,
          .quote-form-grid-3 { grid-template-columns: 1fr; }
        }
        @media (max-width: 576px) {
          .page-hero-title { font-size: 1.7rem; }
          .page-hero-subtitle { font-size: 0.9rem; }
          .quote-form-card { margin: 0 -12px; }
        }
