/*
 * Travelski Design System
 *
 * This stylesheet restores the original Travelski colours, fonts and icons
 * that were removed when splitting the monolithic CSS.  Load this file
 * after travelski-main.css when you want the page to appear with
 * Travelski’s authentic look and feel.
 */

/* ------------------------------------------ */
/*  Root variables                            */
/*
 * The palette below matches the original Travelski design.  Colours are
 * defined as CSS custom properties so that they can be referenced by
 * the utility classes that follow.  Fonts are defined via two
 * variables to align with the naming used by yoonly-design.css.
 */
:root {
    /* Primary palette */
    --primary-blue : #0042B8;
    --primary-green : #005F32;
    --primary-orange : #FE6100;
    --primary-black : #000000;
    --primary-white : #FFFFFF;
    --primary-yellow : #FFB23E;

    /* Declination Blue */
    --blue-50 : #F2F6FB;
    --blue-100 : #EEF2FA;
    --blue-200 : #D3DEF2;
    --blue-300 : #B9C9EA;
    --blue-400 : #9FB6E2;
    --blue-500 : #85A2DB;
    --blue-600 : #6B8ED3;
    --blue-700 : #517ACB;
    --blue-800 : #3766C3;
    --blue-900 : #1E53BC;
    --blue-dark : #0A1F8E;

    /* Declination Green */
    --green-50 : #F2F7F5;
    --green-100 : #E5EFEB;
    --green-200 : #CCDFD6;
    --green-300 : #B3CFC2;
    --green-400 : #99BFAD;
    --green-500 : #80AF98;
    --green-600 : #669F84;
    --green-700 : #4D8F70;
    --green-800 : #337F5B;
    --green-900 : #1A6F47;
    --green-dark : #004628;

    /* Declination Orange (TravelSki orange) */
    --orange-50 : #FFF7F2;
    --orange-100 : #FFEFE5;
    --orange-200 : #FFDFCC;
    --orange-300 : #FFD0B3;
    --orange-400 : #FFC099;
    --orange-500 : #FFB080;
    --orange-600 : #FEA066;
    --orange-700 : #FE904D;
    --orange-800 : #FE8133;
    --orange-900 : #FE711A;
    --orange-dark : #FF4100;

    /* Declination Grey */
    --grey-50 : #F8F9FA;
    --grey-100 : #F1F3F5;
    --grey-200 : #E9ECEF;
    --grey-300 : #DEE2E6;
    --grey-400 : #CED4DA;
    --grey-500 : #ADB5BD;
    --grey-600 : #868E96;
    --grey-700 : #585F66;
    --grey-800 : #1D2329;
    --grey-900 : #0D141B;
    --grey-dark : #000000;

    /* Declination Yellow (used for highlights) */
    --yellow-50: #fff9e5;
    --yellow-100: #fff2cc;
    --yellow-200: #ffe599;
    --yellow-300: #ffdd66;
    --yellow-400: #ffd133;
    --yellow-500: #ffcc00;
    --yellow-550: #ffbe1d;
    --yellow-600: #e6b800;
    --yellow-700: #cc9900;
    --yellow-800: #b38000;
    --yellow-900: #995c00;
    --yellow-dark: #804000;
    --yellow-encahnced: #ff871d3d;

    /* Font families */
    --font-title: 'Cy';
    --font-body: 'Roboto';

    /* Font weights */
    --font-weight-default: 400;

    /* Border radius */
    --border-radius-default: 8px;
    --border-radius-secondary: 12px;
    --border-radius-button: 81px;
    --border-radius-button-secondary: 44px;
    --border-radius-search-bar: 56px;
    --border-radius-card: 10px;
    --border-radius-card-secondary: 16px;

}

/* ------------------------------------------ */
/*  Colour utilities                          */
/*
 * Utility classes provide quick access to the palette.  Class names
 * mirror those used in the original TravelSki stylesheet.
 */
/* Primary colours */
.bg-primary-blue   { background-color: var(--primary-blue); }
.text-primary-blue { color:            var(--primary-blue); }
.bg-primary-green  { background-color: var(--primary-green); }
.text-primary-green{ color:            var(--primary-green); }
.bg-primary-orange { background-color: var(--primary-orange); }
.text-primary-orange{ color:           var(--primary-orange); }
.bg-primary-black  { background-color: var(--primary-black); }
.text-primary-black{ color:            var(--primary-black); }
.bg-primary-white  { background-color: var(--primary-white); }
.text-primary-white{ color:            var(--primary-white); }
.bg-primary-yellow { background-color: var(--primary-yellow); }
.text-primary-yellow{color:            var(--primary-yellow); }

/* Blue declination */
.bg-blue-50   { background-color: var(--blue-50); }
.text-blue-50 { color:            var(--blue-50); }
.bg-blue-100  { background-color: var(--blue-100); }
.text-blue-100{ color:            var(--blue-100); }
.bg-blue-200  { background-color: var(--blue-200); }
.text-blue-200{ color:            var(--blue-200); }
.bg-blue-300  { background-color: var(--blue-300); }
.text-blue-300{ color:            var(--blue-300); }
.bg-blue-400  { background-color: var(--blue-400); }
.text-blue-400{ color:            var(--blue-400); }
.bg-blue-500  { background-color: var(--blue-500); }
.text-blue-500{ color:            var(--blue-500); }
.bg-blue-600  { background-color: var(--blue-600); }
.text-blue-600{ color:            var(--blue-600); }
.bg-blue-700  { background-color: var(--blue-700); }
.text-blue-700{ color:            var(--blue-700); }
.bg-blue-800  { background-color: var(--blue-800); }
.text-blue-800{ color:            var(--blue-800); }
.bg-blue-900  { background-color: var(--blue-900); }
.text-blue-900{ color:            var(--blue-900); }
.bg-blue-dark { background-color: var(--blue-dark); }
.text-blue-dark{ color:            var(--blue-dark); }

/* Green declination */
.bg-green-50   { background-color: var(--green-50); }
.text-green-50 { color:            var(--green-50); }
.bg-green-100  { background-color: var(--green-100); }
.text-green-100{ color:            var(--green-100); }
.bg-green-200  { background-color: var(--green-200); }
.text-green-200{ color:            var(--green-200); }
.bg-green-300  { background-color: var(--green-300); }
.text-green-300{ color:            var(--green-300); }
.bg-green-400  { background-color: var(--green-400); }
.text-green-400{ color:            var(--green-400); }
.bg-green-500  { background-color: var(--green-500); }
.text-green-500{ color:            var(--green-500); }
.bg-green-600  { background-color: var(--green-600); }
.text-green-600{ color:            var(--green-600); }
.bg-green-700  { background-color: var(--green-700); }
.text-green-700{ color:            var(--green-700); }
.bg-green-800  { background-color: var(--green-800); }
.text-green-800{ color:            var(--green-800); }
.bg-green-900  { background-color: var(--green-900); }
.text-green-900{ color:            var(--green-900); }
.bg-green-dark { background-color: var(--green-dark); }
.text-green-dark{ color:           var(--green-dark); }

/* Orange declination */
.bg-orange-50   { background-color: var(--orange-50); }
.text-orange-50 { color:            var(--orange-50); }
.bg-orange-100  { background-color: var(--orange-100); }
.text-orange-100{ color:            var(--orange-100); }
.bg-orange-200  { background-color: var(--orange-200); }
.text-orange-200{ color:            var(--orange-200); }
.bg-orange-300  { background-color: var(--orange-300); }
.text-orange-300{ color:            var(--orange-300); }
.bg-orange-400  { background-color: var(--orange-400); }
.text-orange-400{ color:            var(--orange-400); }
.bg-orange-500  { background-color: var(--orange-500); }
.text-orange-500{ color:            var(--orange-500); }
.bg-orange-600  { background-color: var(--orange-600); }
.text-orange-600{ color:            var(--orange-600); }
.bg-orange-700  { background-color: var(--orange-700); }
.text-orange-700{ color:            var(--orange-700); }
.bg-orange-800  { background-color: var(--orange-800); }
.text-orange-800{ color:            var(--orange-800); }
.bg-orange-900  { background-color: var(--orange-900); }
.text-orange-900{ color:            var(--orange-900); }
.bg-orange-dark { background-color: var(--orange-dark); }
.text-orange-dark{ color:           var(--orange-dark); }

/* Grey declination */
.bg-grey-50   { background-color: var(--grey-50); }
.text-grey-50 { color:            var(--grey-50); }
.bg-grey-100  { background-color: var(--grey-100); }
.text-grey-100{ color:            var(--grey-100); }
.bg-grey-200  { background-color: var(--grey-200); }
.text-grey-200{ color:            var(--grey-200); }
.bg-grey-300  { background-color: var(--grey-300); }
.text-grey-300{ color:            var(--grey-300); }
.bg-grey-400  { background-color: var(--grey-400); }
.text-grey-400{ color:            var(--grey-400); }
.bg-grey-500  { background-color: var(--grey-500); }
.text-grey-500{ color:            var(--grey-500); }
.bg-grey-600  { background-color: var(--grey-600); }
.text-grey-600{ color:            var(--grey-600); }
.bg-grey-700  { background-color: var(--grey-700); }
.text-grey-700{ color:            var(--grey-700); }
.bg-grey-800  { background-color: var(--grey-800); }
.text-grey-800{ color:            var(--grey-800); }
.bg-grey-900  { background-color: var(--grey-900); }
.text-grey-900{ color:            var(--grey-900); }
.bg-grey-dark { background-color: var(--grey-dark); }
.text-grey-dark{ color:           var(--grey-dark); }

/* Yellow declination */
.bg-yellow-50   { background-color: var(--yellow-50); }
.text-yellow-50 { color:            var(--yellow-50); }
.bg-yellow-100  { background-color: var(--yellow-100); }
.text-yellow-100{ color:            var(--yellow-100); }
.bg-yellow-200  { background-color: var(--yellow-200); }
.text-yellow-200{ color:            var(--yellow-200); }
.bg-yellow-300  { background-color: var(--yellow-300); }
.text-yellow-300{ color:            var(--yellow-300); }
.bg-yellow-400  { background-color: var(--yellow-400); }
.text-yellow-400{ color:            var(--yellow-400); }
.bg-yellow-500  { background-color: var(--yellow-500); }
.text-yellow-500{ color:            var(--yellow-500); }
.bg-yellow-600  { background-color: var(--yellow-600); }
.text-yellow-600{ color:            var(--yellow-600); }
.bg-yellow-700  { background-color: var(--yellow-700); }
.text-yellow-700{ color:            var(--yellow-700); }
.bg-yellow-800  { background-color: var(--yellow-800); }
.text-yellow-800{ color:            var(--yellow-800); }
.bg-yellow-900  { background-color: var(--yellow-900); }
.text-yellow-900{ color:            var(--yellow-900); }
.bg-yellow-dark { background-color: var(--yellow-dark); }
.text-yellow-dark{ color:           var(--yellow-dark); }

/* ------------------------------------------ */
/*  Typography                                */
/*
 * The original Travelski hierarchy: headlines use the custom “Cy” font
 * while all body copy uses Roboto.  Sizes and weights mirror the
 * definitions in the monolithic stylesheet.
 */
.title-0 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 900;
    font-size: 64px;
    line-height: 76px;
    font-feature-settings: "calt" 0;
}
.title-1 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 900;
    font-size: 36px;
    line-height: 44px;
    font-feature-settings: "calt" 0;
}
.title-2 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 800;
    font-size: 32px;
    line-height: 36px;
    font-feature-settings: "calt" 0;
}
.title-3 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 800;
    font-size: 24px;
    line-height: 32px;
    font-feature-settings: "calt" 0;
}
.title-4 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    font-feature-settings: "calt" 0;
}
.price-title {
color: var(--primary-green);
    font-weight: 600 !important;
    font-size: 24px;
    line-height: 30px !important;
}
.heading {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    line-height: 24px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.body {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    font-size: 16px;
    line-height: 24px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.body-strong {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.caption,
.caption-fix {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    font-size: 14px;
    line-height: 18px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.caption-strong {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.subcaption {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    font-size: 12px;
    line-height: 14px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.subcaption-strong {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.buttons-default {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    font-size: 16px;
    line-height: 20px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.buttons-small {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}
.buttons-large {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    font-size: 18px;
    line-height: 20px;
}

/* Links */
.link-default {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    text-decoration-line: underline;
    color: var(--primary-blue);
    font-feature-settings: "calt" 0;
}
.link-small {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    text-decoration-line: underline;
    font-feature-settings: "calt" 0;
    color: var(--primary-blue);
}
.link-default:hover,
.link-small:hover {
    color: var(--blue-dark);
}

/* ------------------------------------------ */
/*  Alert and feedback colours                */
.alert {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    font-feature-settings: 'pnum' on, 'lnum' on;
    border-radius: var(--border-radius-default);
    padding: 12px;
}
.success {
    color: var(--primary-green);
    background-color: var(--green-100);
}
.error {
    color: var(--primary-orange);
    background-color: var(--orange-100);
}
.info-blue {
    color: var(--blue-800);
    background-color: var(--blue-100);
}
.info-grey {
    color: var(--grey-700);
    background-color: var(--grey-100);
}
.blue {
    color: var(--primary-blue);
    background-color: var(--blue-100);
    padding: 12px;
}
.grey {
    color: var(--grey-700);
    background-color: var(--grey-100);
    padding: 12px;
}

/* ------------------------------------------ */
/*  Buttons                                   */
.button-primary {
    border: none;
    border-radius: var(--border-radius-button);
    padding: 15px 20px;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: 'pnum' on, 'lnum' on;
    flex: none;
    order: 0;
    flex-grow: 0;
    text-decoration: none;
}
.primary-normal {
    color: var(--primary-white);
    background-color: var(--primary-blue);
}
.primary-hover {
    color: var(--primary-white);
    background-color: var(--blue-dark);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}
.primary-onclick {
    color: var(--blue-700);
    background-color: var(--blue-dark);
}
.primary-disabled {
    color: var(--grey-500);
    background-color: var(--grey-200);
    box-shadow: none;
    pointer-events: none;
}
.button-primary:hover {
    color: var(--primary-white);
    background-color: var(--blue-dark);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}
.button-primary:disabled {
    color: var(--grey-500);
    background-color: var(--grey-200);
    box-shadow: none;
    pointer-events: none;
}
.button-primary:active {
    color: var(--blue-700);
    background-color: var(--blue-dark);
}

/* Secondary buttons */
.button-secondary {
    border: none;
    border-radius: var(--border-radius-button-secondary);
    padding: 15px 20px;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    line-length: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: 'pnum' on, 'lnum' on;
    text-decoration: none;
    background: transparent;
}
.secondary-normal {
    color: var(--primary-blue);
    border: 1px solid var(--blue-dark);
}
.secondary-hover {
    color: var(--blue-dark);
    background-color: var(--blue-200);
    border: 1px solid var(--blue-dark);
}
.secondary-onclick {
    color: var(--blue-dark);
    background-color: var(--blue-500);
    border: 1px solid var(--blue-dark);
}
.secondary-disabled {
    color: var(--grey-500);
    background-color: var(--grey-200);
    border: 1px solid var(--grey-500);
    pointer-events: none;
}
.button-secondary:hover {
    color: var(--blue-dark);
    background-color: var(--blue-200);
    border: 1px solid var(--blue-dark);
}
.button-secondary:active {
    color: var(--blue-dark);
    background-color: var(--blue-500);
    border: 1px solid var(--blue-dark);
}
.button-secondary:disabled {
    color: var(--grey-500);
    background-color: var(--grey-200);
    border: 1px solid var(--grey-500);
}

/* Secondary small button */
.button-secondary-small {
    border-radius: var(--border-radius-button-secondary);
    border: 1px solid var(--blue-dark);
    padding: 5px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    background: transparent;
    color: var(--primary-blue);
    width: 128px;
    height: 34px;
    white-space: nowrap;
    box-sizing: border-box;
}
.button-secondary-small:hover {
    color: var(--blue-dark);
    border: 1px solid var(--blue-400);
}
.button-secondary-small:active {
    color: var(--blue-dark);
    background-color: var(--blue-500);
    border: 1px solid var(--primary-blue);
}
.button-secondary-small:disabled {
    color: var(--grey-600);
    background-color: var(--grey-200);
    border: 1px solid var(--grey-500);
}

/* ------------------------------------------ */
/*  Outline states                            */
.outline-default {
    border: 1px solid var(--grey-300);
}
.outline-hover {
    border: 1px solid var(--grey-300);
    box-shadow: 0px 0px 0px 4px rgba(0, 66, 184, 0.1);
}
.outline-selected {
    border: 2px solid var(--primary-blue);
    box-shadow: 0px 0px 0px 4px rgba(0, 66, 184, 0.2);
}

/* ------------------------------------------ */
/*  Form feedback                             */
.subcaption-default { color: var(--grey-500); }
.subcaption-disabled{ color: var(--grey-400); }
.subcaption-error  { color: var(--primary-orange); }
.label-text-default{ color: var(--grey-600); }
.label-text-disabled{ color: var(--grey-300); pointer-events: none; }
.label-active {
    top: -25px;
    font-weight: var(--font-weight-defaul);
    font-size: 12px;
    line-height: 14px;
    background-color: var(--primary-white);
    padding: 0.5rem 0.4rem;
    transform: translate(-10px);
}
.label-active-default{ color: var(--blue-800); }
.label-active-error  { color: var(--primary-orange); }
.text-default { color: var(--grey-600); }
.border-default { border-color: var(--grey-300); }

/* ------------------------------------------ */
/*  Icons                                     */
/*
 * Inline SVGs replicate the chevron icon used throughout the Travelski
 * components.  The stroke colours match the primary blue and its
 * darkest shade for hover.
 */
.tf-chevron-right:after {
    content: url("data:image/svg+xml,%3Csvg%20width%3D'7'%20height%3D'11'%20viewBox%3D'0%200%207%2011'%20fill%3D'none'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M1.16675%201.06738L5.16675%205.06738L1.16675%209.06738'%20stroke%3D'%230042B8'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E");
    width: 7px;
    height: 11px;
    display: inline-block;
    color: var(--primary-blue);
    position: absolute;
    right: 20px;
    margin-top: 3px;
}
.tf-chevron-right:hover:after {
    content: url("data:image/svg+xml,%3Csvg%20width%3D'7'%20height%3D'11'%20viewBox%3D'0%200%207%2011'%20fill%3D'none'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M1.16675%201.06738L5.16675%205.06738L1.16675%209.06738'%20stroke%3D'%230A1F8E'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E");
}