/*
 * Black Friday landing page (templates/default/black_friday.php).
 * Loaded in <head> by index::black_friday() after destination_v2.css;
 * every rule is scoped to .bf-v2. Sky-blue to white hero, white rounded
 * cards with soft shadows, navy Poppins headings, brand pink for the key
 * phrase, the code and the main buttons only.
 *
 * Black Friday / Cyber Week look (.bf-v2.ss-promo--blackred, at the end):
 * black hero and closing CTA with white headings, red code chip and red
 * main buttons; destination cards stay light with red accents. Small red
 * text on black uses #FF4D5E (6:1); white on #E11D2E is 4.75:1.
 */

.bf-v2 {
   --bf-pink: #E8236E;
   --bf-pink-dark: #C2145A;
   --bf-navy: #14183A;
   --bf-sky: #dbe6f0;
   --bf-soft: #f3f5f9;
   --bf-border: #E4E8F0;
   --bf-text2: #5B6178;
   --bf-shadow: 0 6px 24px rgba(20, 24, 58, 0.07);
}

/* Hero */
.bf-v2 .bf-hero {
   background: linear-gradient(180deg, #cfe6f7 0%, #e9f3fb 55%, #FAFAFA 100%);
   padding-bottom: 32px;
}

.bf-v2 .bf-hero-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 24px;
   margin-top: 16px;
   align-items: center;
}

.bf-v2 .dv2-hero h1 {
   margin: 0;
   font-size: 30px;
   line-height: 1.15;
}

.bf-v2 .bf-key {
   color: var(--bf-pink);
}

.bf-v2 .bf-intro {
   margin: 12px 0 0;
   font-size: 16px;
   line-height: 1.6;
   color: var(--bf-navy);
   max-width: 620px;
}

.bf-v2 .bf-next {
   margin: 10px 0 0;
   font-size: 14px;
   line-height: 1.5;
   color: var(--bf-text2);
   max-width: 620px;
}

.bf-v2 .bf-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 20px;
}

.no-flexgap .bf-v2 .bf-actions > * + * {
   margin-left: 10px;
}

@media (min-width: 960px) {
   .bf-v2 .bf-hero-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
      gap: 40px;
      margin-top: 24px;
   }

   .bf-v2 .dv2-hero h1 {
      font-size: 42px;
   }

   .bf-v2 .bf-intro {
      font-size: 17px;
   }
}

/* Code card */
.bf-v2 .bf-code-card {
   box-sizing: border-box;
   padding: 24px;
   background: #fff;
   border: 1px solid var(--bf-border);
   border-radius: 20px;
   box-shadow: var(--bf-shadow);
   text-align: center;
}

.bf-v2 .bf-code-label {
   margin: 0;
   font-size: 13px;
   font-weight: 600;
   color: var(--bf-text2);
   text-transform: uppercase;
   letter-spacing: 0.06em;
}

.bf-v2 .bf-code {
   margin: 10px 0 0;
   padding: 12px 16px;
   border: 2px dashed var(--bf-sky);
   border-radius: 14px;
   background: var(--bf-soft);
   font: 700 32px/1.1 'Poppins', Arial, sans-serif;
   letter-spacing: 0.08em;
   color: var(--bf-pink);
   user-select: all;
}

.bf-v2 .bf-code-off {
   margin: 12px 0 0;
   font: 700 18px/1.3 'Poppins', Arial, sans-serif;
   color: var(--bf-navy);
}

.bf-v2 .bf-code-dates {
   margin: 4px 0 0;
   font-size: 14px;
   color: var(--bf-text2);
}

.bf-v2 .bf-terms {
   display: inline-block;
   margin-top: 12px;
   font-size: 13px;
   color: var(--bf-text2);
   text-decoration: underline;
}

/* Buttons */
.bf-v2 .bf-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 46px;
   padding: 0 22px;
   border: 1px solid var(--bf-border);
   border-radius: 999px;
   background: #fff;
   color: var(--bf-navy);
   font: 600 15px/1 'Poppins', Arial, sans-serif;
   text-decoration: none;
   white-space: nowrap;
}

.bf-v2 .bf-btn:hover {
   border-color: var(--bf-navy);
   color: var(--bf-navy);
   text-decoration: none;
}

.bf-v2 .bf-btn-primary {
   background: var(--bf-pink);
   border-color: var(--bf-pink);
   color: #fff;
}

.bf-v2 .bf-btn-primary:hover {
   background: var(--bf-pink-dark);
   border-color: var(--bf-pink-dark);
   color: #fff;
}

/* Destination cards */
.bf-v2 .dv2-section-head p {
   margin: 4px 0 0;
   color: var(--bf-text2);
}

.bf-v2 .bf-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
   margin-top: 16px;
}

@media (min-width: 640px) {
   .bf-v2 .bf-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (min-width: 960px) {
   .bf-v2 .bf-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
}

.bf-v2 .bf-card {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   height: 100%;
   padding: 18px;
   background: #fff;
   border: 1px solid var(--bf-border);
   border-radius: 16px;
   box-shadow: var(--bf-shadow);
   color: var(--bf-navy);
   text-decoration: none;
   transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.bf-v2 .bf-card:hover {
   color: var(--bf-navy);
   text-decoration: none;
   box-shadow: 0 10px 30px rgba(20, 24, 58, 0.12);
   transform: translateY(-2px);
}

.bf-v2 .bf-card-top {
   display: flex;
   align-items: center;
   gap: 10px;
}

.no-flexgap .bf-v2 .bf-card-top > * + * {
   margin-left: 10px;
}

.bf-v2 .bf-flag {
   width: 40px;
   height: 27px;
   object-fit: cover;
   border-radius: 4px;
   box-shadow: 0 0 0 1px rgba(20, 24, 58, 0.08);
}

.bf-v2 .bf-card-name {
   font: 700 17px/1.3 'Poppins', Arial, sans-serif;
}

.bf-v2 .bf-card-line {
   display: block;
   flex-grow: 1;
   margin: 12px 0 14px;
   font-size: 14px;
   line-height: 1.5;
   color: var(--bf-text2);
}

.bf-v2 .bf-card-foot {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 8px;
   padding-top: 12px;
   border-top: 1px solid var(--bf-soft);
}

.bf-v2 .bf-price {
   font-size: 14px;
   color: var(--bf-text2);
}

.bf-v2 .bf-price strong {
   font-size: 17px;
   color: var(--bf-navy);
}

.bf-v2 .bf-deal {
   display: block;
   margin-top: 2px;
   font-size: 12px;
   font-weight: 600;
   color: var(--bf-pink);
}

.bf-v2 .bf-go {
   font-size: 14px;
   font-weight: 600;
   color: var(--bf-navy);
   white-space: nowrap;
}

.bf-v2 .bf-go i {
   font-size: 11px;
   margin-left: 4px;
}

.bf-v2 .bf-more {
   margin: 16px 0 0;
   text-align: center;
}

.bf-v2 .bf-more a {
   font-weight: 600;
   text-decoration: underline;
}

/* Steps */
.bf-v2 .bf-steps {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
   margin: 16px 0 0;
   padding: 0;
   list-style: none;
}

@media (min-width: 640px) {
   .bf-v2 .bf-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (min-width: 960px) {
   .bf-v2 .bf-steps {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
}

.bf-v2 .bf-steps li {
   display: flex;
   gap: 14px;
   padding: 18px;
   background: #fff;
   border: 1px solid var(--bf-border);
   border-radius: 16px;
   box-shadow: var(--bf-shadow);
}

.no-flexgap .bf-v2 .bf-steps li > * + * {
   margin-left: 14px;
}

.bf-v2 .bf-step-num {
   flex: 0 0 34px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: var(--bf-sky);
   color: var(--bf-navy);
   font: 700 15px/1 'Poppins', Arial, sans-serif;
}

.bf-v2 .bf-steps h3 {
   margin: 4px 0 6px;
   font-size: 16px;
   font-weight: 700;
}

.bf-v2 .bf-steps p {
   margin: 0;
   font-size: 14px;
   line-height: 1.55;
   color: var(--bf-text2);
}

.bf-v2 .bf-steps a,
.bf-v2 .bf-faq a,
.bf-v2 .bf-small a {
   text-decoration: underline;
}

/* FAQ */
.bf-v2 .bf-faq {
   margin-top: 16px;
   background: #fff;
   border: 1px solid var(--bf-border);
   border-radius: 16px;
   box-shadow: var(--bf-shadow);
   overflow: hidden;
}

.bf-v2 .bf-faq-item + .bf-faq-item {
   border-top: 1px solid var(--bf-border);
}

.bf-v2 .bf-faq-item summary {
   position: relative;
   padding: 16px 48px 16px 20px;
   font: 600 16px/1.4 'Poppins', Arial, sans-serif;
   color: var(--bf-navy);
   cursor: pointer;
   list-style: none;
}

.bf-v2 .bf-faq-item summary::-webkit-details-marker {
   display: none;
}

.bf-v2 .bf-faq-item summary::after {
   content: "+";
   position: absolute;
   right: 20px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 22px;
   font-weight: 500;
   color: var(--bf-text2);
}

.bf-v2 .bf-faq-item[open] summary::after {
   content: "-";
}

.bf-v2 .bf-faq-item p {
   margin: 0;
   padding: 0 20px 18px;
   font-size: 15px;
   line-height: 1.6;
   color: var(--bf-text2);
}

.bf-v2 .bf-small {
   margin: 14px 0 0;
   font-size: 13px;
   color: var(--bf-text2);
}

/* Final CTA */
.bf-v2 .bf-cta {
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding: 24px;
   background: linear-gradient(180deg, #e9f3fb 0%, #ffffff 100%);
   border: 1px solid var(--bf-border);
   border-radius: 20px;
   box-shadow: var(--bf-shadow);
}

.bf-v2 .bf-cta h2 {
   margin: 0;
}

.bf-v2 .bf-cta p {
   margin: 6px 0 0;
   color: var(--bf-text2);
}

@media (min-width: 768px) {
   .bf-v2 .bf-cta {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 32px;
   }
}

/* Black Friday / Cyber Week look (promotion theme 'blackred') */
.bf-v2.ss-promo--blackred {
   --bf-red: #E11D2E;
   --bf-red-dark: #B3121F;
   --bf-red-light: #FF4D5E;
   --bf-black: #0B0B0B;
}

.bf-v2.ss-promo--blackred .bf-hero {
   background: var(--bf-black);
   color: #fff;
}

.bf-v2.ss-promo--blackred .bf-hero .dv2-crumbs {
   color: #bfbfbf;
}

.bf-v2.ss-promo--blackred .bf-hero .dv2-crumbs a {
   color: #e6e6e6;
}

.bf-v2.ss-promo--blackred .bf-hero h1 {
   color: #fff;
}

.bf-v2.ss-promo--blackred .bf-key {
   color: var(--bf-red-light);
}

.bf-v2.ss-promo--blackred .bf-intro {
   color: #f2f2f2;
}

.bf-v2.ss-promo--blackred .bf-intro strong,
.bf-v2.ss-promo--blackred .bf-next strong {
   padding: 1px 7px;
   border-radius: 6px;
   background: var(--bf-red);
   color: #fff;
   letter-spacing: 0.04em;
}

.bf-v2.ss-promo--blackred .bf-next {
   color: #cfcfcf;
}

.bf-v2.ss-promo--blackred .bf-code-card {
   background: #161616;
   border: 1px solid #2e2e2e;
   box-shadow: none;
}

.bf-v2.ss-promo--blackred .bf-code-label,
.bf-v2.ss-promo--blackred .bf-code-dates {
   color: #cfcfcf;
}

.bf-v2.ss-promo--blackred .bf-code {
   border: 2px dashed rgba(255, 255, 255, 0.7);
   background: var(--bf-red);
   color: #fff;
}

.bf-v2.ss-promo--blackred .bf-code-off {
   color: #fff;
}

.bf-v2.ss-promo--blackred .bf-terms,
.bf-v2.ss-promo--blackred .bf-terms:hover {
   color: #fff;
}

.bf-v2.ss-promo--blackred .bf-btn-primary {
   background: var(--bf-red);
   border-color: var(--bf-red);
   color: #fff;
}

.bf-v2.ss-promo--blackred .bf-btn-primary:hover {
   background: var(--bf-red-dark);
   border-color: var(--bf-red-dark);
   color: #fff;
}

.bf-v2.ss-promo--blackred .bf-hero .bf-btn:not(.bf-btn-primary) {
   background: transparent;
   border-color: rgba(255, 255, 255, 0.6);
   color: #fff;
}

.bf-v2.ss-promo--blackred .bf-hero .bf-btn:not(.bf-btn-primary):hover {
   border-color: #fff;
   color: #fff;
}

.bf-v2.ss-promo--blackred .bf-btn:focus-visible {
   outline: 2px solid var(--bf-red-light);
   outline-offset: 2px;
}

.bf-v2.ss-promo--blackred .bf-card:hover {
   border-color: var(--bf-black);
}

.bf-v2.ss-promo--blackred .bf-deal {
   color: var(--bf-red);
}

.bf-v2.ss-promo--blackred .bf-step-num {
   background: var(--bf-black);
   color: #fff;
}

.bf-v2.ss-promo--blackred .bf-cta {
   background: var(--bf-black);
   border-color: var(--bf-black);
}

.bf-v2.ss-promo--blackred .bf-cta h2 {
   color: #fff;
}

.bf-v2.ss-promo--blackred .bf-cta p {
   color: #d9d9d9;
}