/* ==========================================================================
   Viking Booking – Consolidated Stylesheet
   ========================================================================== */

/* ---------- Vars ---------- */
:root{
  --vb-blue:#2271b1;
  --vb-blue-dark:#1b5a8d;
  --vb-border:#e5e7eb;
  --vb-border-2:#e9e9e9;
  --vb-bg:#f9fafb;
  --vb-text:#111;
}

/* ---------- Grundlayout / Cards ---------- */
#viking-booking-root{max-width:720px;margin:0 auto;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vb-text);}
.vb-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 6px 20px rgba(0,0,0,.08);border:1px solid var(--vb-border);margin:30px auto;}
.vb-title{font-size:22px;font-weight:700;margin-bottom:18px;}

/* ---------- Formelement ---------- */
.vb-label{display:block;font-weight:600;margin:14px 0 6px;}
.vb-input{width:100%!important;border:1.4px solid #d1d5db!important;border-radius:8px!important;padding:10px 12px!important;font-size:15px!important;background:#f9fafb!important;transition:.2s ease!important;color:var(--vb-text)!important;font-family:inherit!important;line-height:1.4!important;}
.vb-input:hover{background:#fff!important;border-color:#bfc4ca!important;}
.vb-input:focus{border-color:var(--vb-blue)!important;background:#fff!important;box-shadow:0 0 0 2px rgba(34,113,177,.25)!important;outline:none!important;}
.vb-input::placeholder{color:#9ca3af!important;}

@media (max-width:600px){
  .vb-input{font-size:17px!important;} /* iOS zoom fix */
}

/* ---------- Grid ---------- */
.vb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.vb-grid-half{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;}
@media (max-width:600px){.vb-grid-half{grid-template-columns:1fr;}}

/* ---------- Fieldset / Etiketter ---------- */
.vb-fieldset{margin-top:16px;border:1px solid var(--vb-border);border-radius:12px;padding:18px 16px;background:#f8fafc;box-shadow:inset 0 0 6px rgba(0,0,0,.02);color:#000;}
.vb-fieldset legend{font-weight:600;color:#000;font-size:15px;padding:0 8px;display:flex;align-items:center;gap:10px;}
.vb-sublabel{display:block;margin-bottom:4px;font-weight:500;color:#374151;font-size:14px;}
.vb-player-row{margin:10px 0 8px;}

/* ---------- Knappar ---------- */
.vb-btn,.vb-btn-option,.vb-btn-secondary{border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:.2s;}
.vb-btn{background:var(--vb-blue);color:#fff;padding:10px 18px;}
.vb-btn:hover,.vb-btn:focus{background:var(--vb-blue-dark)!important;}
.vb-btn-secondary{background:#f3f4f6;color:#111;padding:10px 18px;}
.vb-btn-secondary:hover,.vb-btn-secondary:focus{background:#e5e7eb!important;}
.vb-btn-option{border:1px solid #cbd5e1;background:#f8fafc;color:#111;padding:6px 12px;margin:5px;}
.vb-btn-option:hover{background:#eef2ff;border-color:var(--vb-blue);color:var(--vb-blue-dark);}
.vb-btn-option.active{background:var(--vb-blue);color:#fff;border-color:var(--vb-blue);}
.vb-btn-option:disabled{cursor:not-allowed;opacity:.4;}
/* Focus harmoniserad */
.vb-btn:focus,.vb-btn:focus-visible,.vb-btn-secondary:focus,.vb-btn-secondary:focus-visible{outline:none!important;box-shadow:0 0 0 2px rgba(34,113,177,.4)!important;border-color:var(--vb-blue)!important;}
.vb-btn:focus:not(:focus-visible),.vb-btn-secondary:focus:not(:focus-visible){outline:none!important;box-shadow:none!important;}

/* ---------- Lediga tider ---------- */
.vb-time-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-top:8px;animation:vbFadeInGrid .35s ease-in-out;}
.vb-time-card{border:1px solid #ddd;border-radius:10px;text-align:center;padding:8px;font-size:.85rem;cursor:pointer;transition:.2s;font-weight:500;display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1.3;min-height:60px;}
.vb-time-slot{font-weight:700;font-size:14px;}
.vb-time-price{font-size:12px;opacity:.9;margin-top:2px;}
.vb-time-card.green{background:#e6f6ea;border:1px solid #7bd389;color:#145c1b;}
.vb-time-card.yellow{background:#fff6cc;border:1px solid #ffcc00;color:#7a6000;}
.vb-time-card.orange{background:#ffe2cc;border:1px solid #ff884d;color:#783100;}
.vb-time-card.gray{background:#f2f2f2;border:1px solid #ccc;color:#999;}
.vb-time-card.selected{background:var(--vb-blue)!important;color:#fff!important;border-color:var(--vb-blue-dark)!important;transform:scale(1.03);}
.vb-dot{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;vertical-align:-webkit-baseline-middle!important;}
.vb-dot.green{background:#4caf50;} .vb-dot.yellow{background:#ffcc00;} .vb-dot.orange{background:#ff884d;}
.vb-sep{opacity:.5;}
.vb-slot-warning{top:6px;right:8px;color:#ff884d;font-size:0;opacity:.9;}

/* ---------- Sammanfattning ---------- */
.vb-summary{background:#f8fafc;border:1px solid var(--vb-border);border-radius:10px;padding:10px 14px;margin-top:12px;}
.vb-summary h4{margin:0 0 4px;font-size:16px;}

/* ---------- Legend ---------- */
.vb-legend{display:flex;justify-content:flex-start;align-items:center;gap:18px;margin-top:10px;font-size:14px;color:#333;flex-wrap:wrap;}
.vb-legend-item{display:flex;align-items:center;gap:6px;white-space:nowrap;flex:0 1 auto;}
@media (max-width:600px){
  .vb-legend{justify-content:left;gap:10px 16px;font-size:13px;}
  .vb-legend-item{flex:0 1 100%;justify-content:left;}
}

/* ---------- “Inga tider” ---------- */
@keyframes vbFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes vbFadeInGrid{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
.vb-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1rem;border-radius:1rem;background:#f9fafb;border:1px solid var(--vb-border);margin:.5rem 0 1rem;animation:vbFadeIn .4s ease-in-out;}
.vb-no-slots{font-size:1.1rem;font-weight:500;color:#374151;margin-bottom:.75rem;}
.vb-empty .vb-btn-secondary{background:#fff;border:1px solid #d1d5db;color:#111827;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;transition:.2s;}
.vb-empty .vb-btn-secondary:hover{background:#f3f4f6;}

/* ---------- Skeleton Loader ---------- */
@keyframes vbShimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.vb-time-grid.loading{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem;margin:1rem 0;animation:vbFadeInGrid .3s ease-in-out;}
.vb-skeleton{height:60px;border-radius:.75rem;background-color:#e5e7eb;background-image:linear-gradient(90deg,#e5e7eb,#f3f4f6,#e5e7eb);background-size:200px 100%;background-repeat:no-repeat;animation:vbShimmer 1.3s infinite linear;box-shadow:0 1px 2px rgba(0,0,0,.05);opacity:.8;}

/* ---------- Modal ---------- */
.vb-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;justify-content:center;align-items:center;z-index:1000;padding:16px;overflow:hidden;}
.vb-modal-content{background:#fff;border-radius:12px;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 6px 20px rgba(0,0,0,.2);display:flex;flex-direction:column;padding:24px;}
.vb-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
@media (min-width:1400px){.vb-modal-content{max-width:720px;}}
@media (max-width:768px){
  .vb-modal{align-items:flex-start;padding:0;}
  .vb-modal-content{border-radius:0;width:100%;height:100vh;max-height:none;padding:20px 20px 100px;}
  .vb-modal-actions{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,#fff 60%);border-top:1px solid var(--vb-border);padding:12px 20px;justify-content:flex-end;gap:10px;box-shadow:0 -2px 10px rgba(0,0,0,.05);z-index:1100;}
}
/* Lås bakgrunds-scroll när modal är öppen */
html.vb-modal-open,body.vb-modal-open{overflow:hidden!important;touch-action:none!important;overscroll-behavior:contain!important;}

/* iOS keyboard open */
body.vb-ios-keyboard-open .vb-modal-content{max-height:none!important;height:auto!important;overflow-y:visible!important;}
body.vb-ios-keyboard-open .vb-modal-actions{position:absolute!important;bottom:auto!important;background:transparent!important;box-shadow:none!important;border:none!important;}

/* ---------- Overlay / Spinner ---------- */
.vb-overlay{position:fixed;inset:0;background:rgba(255,255,255,.8);backdrop-filter:blur(2px);z-index:99999;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-in-out;}
.vb-overlay-inner{text-align:center;color:#333;font-size:16px;font-weight:500;}
.vb-spinner{border:3px solid rgba(0,0,0,.1)!important;border-top:3px solid #007b5e!important;border-radius:50%!important;width:40px!important;height:40px!important;margin:0 auto 12px!important;animation:spin 1s linear infinite!important;}
.vb-overlay-text{font-size:15px;color:#333;}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
body.vb-processing{overflow:hidden;}

/* ---------- Små UI-fixar ---------- */
.vb-actions{margin-top:18px;display:flex;justify-content:flex-start;}
.vb-showmore{display:inline-block;margin:12px auto 0;font-size:12px;padding:6px 14px;border-radius:8px;}
.vb-showmore:hover{color:#000;}
.vb-lane-toggle:hover{color:#0d6efd;}
.vb-modal .vb-input.vb-input-error{border-color:#e74c3c!important;background:#fff6f6!important;}
.vb-modal .vb-input.vb-input-error::placeholder{color:#e74c3c!important;opacity:.9;}

/* ==========================================================================
   WooCommerce Checkout Overrides
   - Orderöversikt och betalsätt
   ========================================================================== */

/* Dolt Elementor-dubbelblock om det används */
.e-checkout__order_review{display:none!important;}

/* (Valfritt) Dölj Woo standard-sektioner om du kör inline-checkout */
.woocommerce-billing-fields{display:none!important;}
.woocommerce-additional-fields{display:none!important;}

/* --------- Orderöversikt (“Din beställning”) --------- */
#order_review_heading{font-size:18px;margin:8px 0 10px;}
#order_review{background:#fff;border:1px solid var(--vb-border-2);border-radius:12px;padding:16px;}
#order_review .shop_table{border:0;}
#order_review .shop_table thead th{border-bottom:1px solid #eee;text-transform:uppercase;letter-spacing:.02em;font-size:13px;padding:8px 0;}
#order_review .shop_table td,#order_review .shop_table th{border:0;padding:8px 0;}
#order_review .product-name{font-weight:600;}
#order_review .variation{margin:4px 0 0;}
#order_review .variation dt{display:none;}
#order_review .variation dd{margin:0;color:#555;white-space:pre-line;font-weight:400;}
#order_review tfoot th,#order_review tfoot td{padding:8px 0;}
#order_review .order-total th,#order_review .order-total td{border-top:1px solid #eee;padding-top:12px;font-size:16px;}
/* Radmarkering för varuraden */
#order_review .shop_table tr.cart_item td,#order_review .shop_table tr.cart_item th{background:#f6f7f9;border-radius:8px;}

/* --------- Betalsätt – fix för dubbla bakgrunder + loggor --------- */
#payment.woocommerce-checkout-payment{margin-top:16px;border-top:1px solid #eee;padding-top:16px;}
#payment .wc_payment_methods{display:flex;flex-direction:column;gap:12px;}
/* Yttre rad – ingen egen bakgrund */
#payment .wc_payment_method{background:transparent;border:0;padding:0;}
/* Labeln fungerar som “kortet” */
#payment .wc_payment_method>label{
  display:flex;align-items:center;gap:10px;font-weight:600;margin:0;padding:12px;
  background:#fafafa;border:1px solid var(--vb-border-2);border-radius:10px;
}
/* Begränsa alla betal-loggor */
#payment .wc_payment_method>label img,.wc_payment_methods label img{max-height:22px;width:auto;height:auto;object-fit:contain;}
/* Särskilt för Klarna-pill */
.payment_method_woocommerce_payments_klarna>label img{max-height:28px;max-width:120px;}
/* Innehållsruta för vald metod */
#payment .payment_box{display:block;margin:10px 0 0;background:#fff;border:1px solid var(--vb-border-2);border-radius:10px;padding:12px;box-shadow:none;}
#payment .payment_box:before{display:none;}
/* Ta bort onödiga ramar i inre formulär */
#payment .payment_box fieldset,#payment .payment_box .wcpay-upe-form{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;}
/* Beställknapp (om den visas) */
#place_order.button.alt{width:100%;height:44px;border-radius:10px;font-size:16px;}

/* Småfixar för layout på mobil */
.col2-set #customer_details .col-1,.col2-set #customer_details .col-2{box-sizing:border-box;}
@media (max-width:768px){.col2-set .col-1,.col2-set .col-2{width:100%;float:none;}#order_review{padding:12px;}}

/* 1) Återställ Woo-placera-order-knappen (du råkade dölja den tidigare) */
.vb-checkout-container button[name="woocommerce_checkout_place_order"],
#place_order {
  display: inline-block !important;
  width: 100%;
  height: 44px;
  border-radius: 10px;
  font-size: 16px;
}

/* 2) Visa dina egna “Nästa/Gå vidare”-knappar som standard */
.vb-modal-actions .vb-btn {
  display: inline-flex !important;
}

/* 3) Men: om checkouten är inladdad i modalen → dölj den externa primärknappen
      (annars får vi två: din + Woo’s “Lägg beställning”) */
.vb-modal:has(.viking-inline-checkout) .vb-modal-actions .vb-btn {
  display: none !important;
}

/* Behåll sekundärknappen (t.ex. “Ändra tid”) även på checkout-steget */
.vb-modal-actions .vb-btn-secondary {
  display: inline-flex !important;
}

/* —— Knapp: korrekt blå färg (inte lila) —— */
#place_order.button.alt,
.woocommerce #payment #place_order,
.vb-checkout-container #place_order {
  background: #2271b1 !important;   /* blå */
  border-color: #1b5a8d !important;
  color: #fff !important;
  box-shadow: none !important;
}
#place_order:hover,
#place_order:focus {
  background: #1b5a8d !important;   /* mörkare blå vid hover/focus */
}

/* —— Orderrad “Produkt”: ta bort rundade hörn —— */
#order_review .shop_table tr.cart_item td,
#order_review .shop_table tr.cart_item th {
  border-radius: 0 !important;       /* inga rundningar */
}

.woocommerce-form-coupon-toggle {
    display: none !important;
}
.vb-time-chip {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 8px 12px;
  background: #f7fbf7;
  cursor: pointer;
  transition: .15s ease;
}
.vb-time-chip:hover { background:#eaf7ea; transform: translateY(-1px); }
.vb-subtitle { color:#555; margin: 4px 0 10px; }