/*
 * Rickytravel Black Friday landing page.
 *
 * The standard Rickytravel header/footer remain provided by the normal
 * frontend elements. Everything below is scoped to the campaign body.
 */

.black-friday-page {
   margin: 0;
   background: #f2f7ff;
}

.black-friday-page #wrapper {
   width: 100%;
   min-width: 0;
   overflow: hidden;
}

.black-friday-page #main.black-friday-main {
   display: block;
   float: none;
   width: 100%;
   max-width: none;
   min-width: 0;
   margin: 0;
   padding: 0;
}

.black-friday-landing {
   width: 100%;
   max-width: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background: #f2f7ff;
   color: #222;
   font-family: 'Poppins', Arial, sans-serif;
}


/* ---------------------------------------------------------
 * HERO
 * --------------------------------------------------------- */

.black-friday-hero {
   position: relative;
   display: block;
   width: 100%;
   height: auto;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background: #111;
   line-height: 0;
}

.black-friday-hero-image {
   display: block;
   width: 100%;
   height: auto;
   margin: 0;
   padding: 0;
   border: 0;
}


/* ---------------------------------------------------------
 * SUBSCRIPTION AREA
 * --------------------------------------------------------- */

.black-friday-signup-wrap {
   position: relative;
   z-index: 5;
   width: 100%;
   margin: 0;
   padding: 28px 20px 0;
   box-sizing: border-box;
   background: #f2f7ff;
}

.black-friday-signup {
   width: 550px;
   max-width: 100%;
   min-height: 240px;
   margin: 0 auto;
   padding: 25px 30px 22px;
   box-sizing: border-box;
   border-radius: 34px;
   background: #222;
   color: #fff;
   text-align: center;
}

.black-friday-signup-eyebrow {
   margin: 0 0 5px;
   color: #fff;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.35;
}

.black-friday-signup-title {
   margin: 0 0 15px;
   color: #fab900;
   font-size: 41px;
   font-weight: 800;
   line-height: 1.1;
   text-transform: uppercase;
}

.black-friday-signup-subtitle {
   max-width: 490px;
   margin: 0 auto 13px;
   color: #fff;
   font-size: 11px;
   font-weight: 400;
   line-height: 1.4;
}


/* ---------------------------------------------------------
 * FORM
 * --------------------------------------------------------- */

.black-friday-signup form {
   margin: 0;
}

.black-friday-form-row {
   display: flex;
   align-items: stretch;
   width: 490px;
   max-width: 100%;
   height: 58px;
   margin: 0 auto 12px;
   overflow: hidden;
   border-radius: 18px;
   background: #fff;
}

.black-friday-form-row .input.email {
   flex: 1 1 auto;
   min-width: 0;
   margin: 0;
   padding: 0;
}

.black-friday-form-row .input.email label {
   display: none;
}

.black-friday-form-row .input.email input {
   display: block;
   width: 100%;
   height: 58px;
   margin: 0;
   padding: 0 20px;
   box-sizing: border-box;
   border: 0;
   border-radius: 0;
   outline: 0;
   background: #fff;
   box-shadow: none;
   color: #777;
   font-family: 'Poppins', Arial, sans-serif;
   font-size: 15px;
   font-weight: 400;
}

.black-friday-form-row .input.email input::placeholder {
   color: #aaa;
   opacity: 1;
}

/*
 * CakePHP FormHelper renders the submit directly because div=false.
 * Target the actual input, rather than a non-existent .submit wrapper.
 */
.black-friday-form-row input[type="submit"],
.black-friday-form-row button[type="submit"] {
   flex: 0 0 145px;
   width: 145px;
   height: 58px;
   margin: 0;
   padding: 0 15px;
   border: 0;
   border-radius: 18px;
   outline: 0;
   background: #0088b1;
   box-shadow: none;
   color: #fff;
   cursor: pointer;
   font-family: 'Poppins', Arial, sans-serif;
   font-size: 17px;
   font-weight: 500;
   text-align: center;
   -webkit-appearance: none;
   appearance: none;
}

.black-friday-form-row input[type="submit"]:hover,
.black-friday-form-row input[type="submit"]:focus,
.black-friday-form-row button[type="submit"]:hover,
.black-friday-form-row button[type="submit"]:focus {
   background: #007aa0;
}


/* ---------------------------------------------------------
 * CONSENT / STATES
 * --------------------------------------------------------- */

.black-friday__consent {
   width: 490px;
   max-width: 100%;
   margin: 0 auto;
   color: #fff;
   font-size: 9px;
   font-weight: 400;
   line-height: 1.45;
   text-align: left;
}

.black-friday__consent input[type="checkbox"] {
   float: left;
   width: 14px;
   height: 14px;
   margin: 2px 10px 0 0;
}

.black-friday__consent label {
   display: block;
   margin: 0;
   overflow: hidden;
   color: #fff;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
}

.black-friday__consent a {
   color: #fff;
   text-decoration: underline;
}

.black-friday__consent .error-message {
   clear: both;
   padding-top: 6px;
   color: #ffc6c6;
   font-size: 10px;
}

.black-friday__error,
.black-friday__success {
   width: 490px;
   max-width: 100%;
   margin: 0 auto 12px;
   padding: 9px 12px;
   box-sizing: border-box;
   border-radius: 8px;
   font-size: 11px;
   line-height: 1.4;
}

.black-friday__error {
   background: #3b1b1b;
   color: #ffd6d6;
}

.black-friday__success {
   background: #173a22;
   color: #daf5df;
}


/* ---------------------------------------------------------
 * WAVE
 * --------------------------------------------------------- */

.black-friday-wave {
   position: relative;
   width: 100%;
   height: 73px;
   margin: 0;
   overflow: hidden;
   background: #0075be;
}

.black-friday-wave:before {
   position: absolute;
   top: -57px;
   left: -2%;
   width: 104%;
   height: 112px;
   content: '';
   background:
      radial-gradient(
         ellipse at 10% 100%,
         #f2f7ff 0,
         #f2f7ff 54%,
         transparent 55%
      ),
      radial-gradient(
         ellipse at 30% 100%,
         #f2f7ff 0,
         #f2f7ff 54%,
         transparent 55%
      ),
      radial-gradient(
         ellipse at 50% 100%,
         #f2f7ff 0,
         #f2f7ff 54%,
         transparent 55%
      ),
      radial-gradient(
         ellipse at 70% 100%,
         #f2f7ff 0,
         #f2f7ff 54%,
         transparent 55%
      ),
      radial-gradient(
         ellipse at 90% 100%,
         #f2f7ff 0,
         #f2f7ff 54%,
         transparent 55%
      );
}


/* ---------------------------------------------------------
 * BENEFITS
 * --------------------------------------------------------- */

.black-friday-benefits {
   width: 100%;
   margin: 0;
   padding: 39px 20px 65px;
   box-sizing: border-box;
   background: #0075be;
   color: #fff;
}

.black-friday-benefits-grid {
   display: grid;
   width: 100%;
   max-width: 1150px;
   margin: 0 auto;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 22px;
   text-align: center;
}

.black-friday-benefit {
   min-width: 0;
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   line-height: 1.45;
   text-transform: uppercase;
}

.black-friday-benefit-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 58px;
   height: 58px;
   margin: 0 auto 20px;
   border: 0;
   border-radius: 0;
   color: #fff;
   font-size: 38px;
   font-weight: 600;
   line-height: 1;
}

.black-friday-benefit strong {
   display: block;
   color: #fab900;
   font-weight: 800;
}


/* ---------------------------------------------------------
 * DESKTOP / TABLET
 * --------------------------------------------------------- */

@media (max-width: 1000px) {

   .black-friday-benefits-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      row-gap: 45px;
   }
}


/* ---------------------------------------------------------
 * MOBILE
 * --------------------------------------------------------- */

@media (max-width: 700px) {

   .black-friday-hero {
      height: 300px;
   }

   .black-friday-hero-grid {
      height: 300px;
      grid-template-rows: repeat(2, 150px);
   }

   .black-friday-hero-ribbon {
      height: 31px;
      line-height: 31px;
      font-size: 10px;
   }

   .black-friday-hero-brand {
      width: 190px;
   }

   .black-friday-hero-brand-main {
      font-size: 29px;
   }

   .black-friday-hero-brand-sub {
      font-size: 17px;
   }

   .black-friday-signup-wrap {
      padding: 22px 14px 0;
   }

   .black-friday-signup {
      min-height: 0;
      padding: 24px 20px 21px;
      border-radius: 28px;
   }

   .black-friday-signup-eyebrow {
      font-size: 14px;
   }

   .black-friday-signup-title {
      font-size: 32px;
   }

   .black-friday-signup-subtitle {
      font-size: 11px;
   }

   .black-friday-form-row {
      display: block;
      height: auto;
      overflow: visible;
      background: transparent;
      border-radius: 0;
   }

   .black-friday-form-row .input.email input {
      height: 54px;
      margin-bottom: 9px;
      border-radius: 15px;
   }

   .black-friday-form-row input[type="submit"],
   .black-friday-form-row button[type="submit"] {
      width: 100%;
      height: 54px;
      border-radius: 15px;
   }

   .black-friday-benefits-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 430px) {

   .black-friday-hero {
      height: 260px;
   }

   .black-friday-hero-grid {
      height: 260px;
      grid-template-rows: repeat(2, 130px);
   }

   .black-friday-signup-title {
      font-size: 27px;
   }

   .black-friday-benefits-grid {
      grid-template-columns: 1fr;
   }
}


/* =========================================================
 * BLACK_FRIDAY_REFERENCE_1200_V1
 * Campaign-content geometry only.
 *
 * Header, navigation and footer intentionally inherit the
 * standard Rickytravel frontend styles without overrides.
 * ========================================================= */

.black-friday-wave {
   width: 100%;
   height: 73px;
   margin: 0;
   background:
      #f2f7ff
      url('/img/black-friday-wave.svg')
      center top / 100% 100%
      no-repeat;
}

.black-friday-wave:before {
   display: none;
}

@media (min-width: 701px) {

   .black-friday-signup-wrap {
      padding-top: 24px;
   }

   .black-friday-signup {
      min-height: 0;
      padding: 20px 30px 10px;
   }

   .black-friday-benefits {
      padding: 70px 20px 95px;
   }
}

/* =========================================================
 * BLACK_FRIDAY_DETAILS_V1
 * Exact homepage advantage icons and approved form control.
 * ========================================================= */

.black-friday-benefit-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 80px;
   height: 82px;
   margin: 0 auto 16px;
   border: 0;
   border-radius: 0;
   background: transparent;
   font-size: 0;
   line-height: 0;
}

.black-friday-benefit-icon img {
   display: block;
   width: auto;
   height: auto;
   max-width: 80px;
   max-height: 82px;
   margin: 0;
}


/*
 * Desktop reference:
 *
 * One white rounded outer pill, with the blue button inset
 * inside the white control instead of touching its outer edge.
 */
@media (min-width: 701px) {

   .black-friday-form-row {
      display: flex;
      align-items: center;
      width: 490px;
      max-width: 100%;
      height: 58px;
      margin: 0 auto 12px;
      padding: 5px;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 18px;
      background: #fff;
   }

   .black-friday-form-row .input.email {
      flex: 1 1 auto;
      min-width: 0;
      height: 48px;
      margin: 0;
      padding: 0;
   }

   .black-friday-form-row .input.email input {
      display: block;
      width: 100%;
      height: 48px;
      margin: 0;
      padding: 0 16px;
      box-sizing: border-box;
      border: 0;
      border-radius: 13px;
      outline: 0;
      background: #fff;
      box-shadow: none;
      color: #777;
   }

   .black-friday-form-row input[type="submit"],
   .black-friday-form-row button[type="submit"] {
      flex: 0 0 135px;
      width: 135px;
      height: 48px;
      margin: 0;
      padding: 0 14px;
      border: 0;
      border-radius: 14px;
      background: #0088b1;
      box-shadow: none;
      color: #fff;
      font-size: 17px;
      font-weight: 500;
      line-height: 48px;
      text-align: center;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
   }
}

/* =========================================================
 * BLACK_FRIDAY_MOBILE_HERO_V1
 * Keep the exact 1200x364 campaign artwork at its natural ratio.
 * ========================================================= */

@media (max-width: 700px) {

   .black-friday-hero {
      height: auto;
      min-height: 0;
      line-height: 0;
   }

   .black-friday-hero-image {
      display: block;
      width: 100%;
      height: auto;
      max-width: 100%;
   }
}


/* =========================================================
 * BLACK_FRIDAY_MOBILE_FIX_V1
 *
 * 1. Preserve the exact 1200x364 hero image aspect ratio.
 * 2. Contain CookieYes preference UI inside the mobile viewport.
 *
 * Header, menu and footer remain controlled by standard
 * Rickytravel frontend responsive styles.
 * ========================================================= */

@media (max-width: 700px) {

   /* Exact hero artwork must define its own height. */
   .black-friday-hero {
      width: 100%;
      height: auto;
      min-height: 0;
      margin: 0;
      padding: 0;
      line-height: 0;
   }

   .black-friday-hero-image {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
   }


   /*
    * CookieYes currently renders an 845px preference panel on a
    * 375px viewport, increasing document scrollWidth to 518px.
    *
    * Keep this correction scoped to the Black Friday page.
    */
   .black-friday-page
   #ckyPreferenceCenter.cky-preference-center {
      width: calc(100vw - 24px) !important;
      max-width: calc(100vw - 24px) !important;
      margin-left: auto !important;
      margin-right: auto !important;
      box-sizing: border-box !important;
   }

   .black-friday-page
   #ckyPreferenceCenter.cky-preference-center * {
      max-width: 100% !important;
      box-sizing: border-box !important;
   }
}

/* =========================================================
 * BLACK_FRIDAY_OPTIONAL_FIELDS_V1
 * Optional name + travel-preference row.
 * ========================================================= */

.black-friday-profile-row {
   display: flex;
   align-items: stretch;
   width: 490px;
   max-width: 100%;
   min-height: 48px;
   margin: 0 auto 7px;
   gap: 7px;
}

.black-friday-name-field {
   position: relative;
   flex: 0 0 195px;
   min-width: 0;
}

.black-friday-name-input {
   display: block;
   width: 100%;
   height: 48px;
   margin: 0;
   padding: 0 15px;
   box-sizing: border-box;
   border: 0;
   border-radius: 14px;
   outline: 0;
   background: #fff;
   box-shadow: none;
   color: #777;
   font-family: 'Poppins', Arial, sans-serif;
   font-size: 13px;
   font-weight: 400;
}

.black-friday-name-input::placeholder {
   color: #aaa;
   opacity: 1;
}

.black-friday-preference-field {
   flex: 1 1 auto;
   min-width: 0;
   min-height: 48px;
   padding: 5px 12px 4px;
   box-sizing: border-box;
   border-radius: 14px;
   background: #fff;
   color: #aaa;
   text-align: left;
}

.black-friday-preference-title {
   display: block;
   margin: 0 0 1px;
   color: #aaa;
   font-family: 'Poppins', Arial, sans-serif;
   font-size: 11px;
   font-weight: 500;
   line-height: 15px;
   white-space: nowrap;
}

.black-friday-preference-options {
   display: flex;
   align-items: center;
   min-height: 20px;
   gap: 12px;
}

.black-friday-preference-options label {
   display: inline-flex;
   align-items: center;
   margin: 0;
   padding: 0;
   color: #aaa;
   cursor: pointer;
   font-family: 'Poppins', Arial, sans-serif;
   font-size: 11px;
   font-weight: 400;
   line-height: 16px;
   white-space: nowrap;
}

.black-friday-preference-options input[type="checkbox"] {
   flex: 0 0 auto;
   width: 14px;
   height: 14px;
   margin: 0 5px 0 0;
   padding: 0;
}

.black-friday-field-error {
   position: absolute;
   z-index: 2;
   margin-top: 3px;
   color: #ffc6c6;
   font-size: 9px;
   line-height: 11px;
}


/* ---------------------------------------------------------
 * Mobile
 * --------------------------------------------------------- */

@media (max-width: 700px) {

   .black-friday-profile-row {
      display: block;
      width: 100%;
      min-height: 0;
      margin-bottom: 9px;
   }

   .black-friday-name-field {
      width: 100%;
      margin-bottom: 8px;
   }

   .black-friday-name-input {
      width: 100%;
      height: 48px;
      border-radius: 14px;
      font-size: 14px;
   }

   .black-friday-preference-field {
      width: 100%;
      min-height: 55px;
      padding: 7px 14px 6px;
      border-radius: 14px;
   }

   .black-friday-preference-title {
      margin-bottom: 3px;
      font-size: 11px;
   }

   .black-friday-preference-options {
      gap: 16px;
   }

   .black-friday-preference-options label {
      font-size: 11px;
   }
}


/* =========================================================
 * BLACK_FRIDAY_SUCCESS_CARD_V1
 * Campaign-native successful registration state.
 * ========================================================= */

.black-friday-signup.black-friday-signup--success {
   padding-top: 25px;
   padding-bottom: 28px;
}

.black-friday-signup--success .black-friday__success {
   width: 490px;
   max-width: 100%;
   margin: 0 auto;
   padding: 0;
   box-sizing: border-box;
   border-radius: 0;
   background: transparent;
   color: #fff;
   text-align: center;
   font-size: inherit;
   line-height: inherit;
}

.black-friday-success-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   margin: 0 auto 10px;
   border-radius: 50%;
   background: #ffc400;
   color: #222;
   font-family: Arial, sans-serif;
   font-size: 27px;
   font-weight: 700;
   line-height: 1;
}

.black-friday-success-title {
   margin: 0 0 8px;
   padding: 0;
   color: #ffc400;
   font-family: 'Poppins', Arial, sans-serif;
   font-size: 24px;
   font-weight: 700;
   line-height: 1.2;
   text-align: center;
}

.black-friday-success-message {
   max-width: 430px;
   margin: 0 auto;
   padding: 0;
   color: #fff;
   font-family: 'Poppins', Arial, sans-serif;
   font-size: 13px;
   font-weight: 500;
   line-height: 1.5;
   text-align: center;
}

.black-friday-success-note {
   max-width: 430px;
   margin: 7px auto 0;
   padding: 0;
   color: #c9c9c9;
   font-family: 'Poppins', Arial, sans-serif;
   font-size: 11px;
   font-weight: 400;
   line-height: 1.45;
   text-align: center;
}

@media (max-width: 700px) {

   .black-friday-signup.black-friday-signup--success {
      padding: 22px 18px 25px;
   }

   .black-friday-success-icon {
      width: 42px;
      height: 42px;
      margin-bottom: 9px;
      font-size: 24px;
   }

   .black-friday-success-title {
      margin-bottom: 7px;
      font-size: 20px;
   }

   .black-friday-success-message {
      font-size: 12px;
      line-height: 1.5;
   }

   .black-friday-success-note {
      margin-top: 6px;
      font-size: 10px;
   }
}