/*
Theme Name:Togo Child
Theme URI: https://togo.uxper.co/
Author: Uxper
Author URI: http://uxper.co/
Description: This is a child theme of Togo
Template: togo
Version: 1.0.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.4
License URI: https://choosealicense.com/licenses/gpl-2.0/
Text Domain: togo-child
Tags: editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/


/**
 * ============================================
 * Metabytes Availability Override Styles
 * ============================================
 */

.mtbc-booking-info {
    display: flex!important;
    flex-direction: column!important;
    align-items: flex-start!important;
    margin-bottom: 10px;
}

.total-price {
    margin-bottom: 0px!important;
}

p.mtbc-seats-text {
    margin-bottom: 0px!important;
    font-weight: 500 !important;
}

/* Error State */
.mtbc-availability-error {
    padding: 40px 20px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mtbc-error-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.mtbc-error-icon {
    font-size: 48px;
}

.mtbc-error-message p {
    color: #d32f2f;
    font-size: 16px;
    margin: 0;
    max-width: 500px;
    line-height: 1.6;
}

/* Unavailable State */
.mtbc-availability-unavailable {
    padding: 40px 20px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mtbc-unavailable-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.mtbc-unavailable-icon {
    font-size: 48px;
}

.mtbc-unavailable-message p {
    color: #f57c00;
    font-size: 16px;
    margin: 0;
    max-width: 500px;
    line-height: 1.6;
}

/* Service Options */
.mtbc-service-options {
    margin-top: 15px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 4px;
}

.mtbc-service-options h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.mtbc-service-options ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.mtbc-service-options li {
    font-size: 13px;
    margin-bottom: 5px;
    color: #666;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mtbc-availability-error,
    .mtbc-availability-unavailable {
        padding: 30px 15px;
        min-height: 150px;
    }
    
    .mtbc-error-icon,
    .mtbc-unavailable-icon {
        font-size: 36px;
    }
    
    .mtbc-error-message p,
    .mtbc-unavailable-message p {
        font-size: 14px;
    }
}

/**
 * ============================================
 * Metabytes Availability Override Styles
 * ============================================
 */

/* Loading State */
.mtbc-availability-loading {
    padding: 60px 20px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.mtbc-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: mtbc-spin 1s linear infinite;
}

@keyframes mtbc-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mtbc-availability-loading p {
    color: #666;
    font-size: 16px;
    margin: 0;
    font-weight: 500;
}

/* Error State */
.mtbc-availability-error {
    padding: 40px 20px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mtbc-error-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.mtbc-error-icon {
    font-size: 48px;
}

.mtbc-error-message p {
    color: #d32f2f;
    font-size: 16px;
    margin: 0;
    max-width: 500px;
    line-height: 1.6;
}

/* Unavailable State */
.mtbc-availability-unavailable {
    padding: 40px 20px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mtbc-unavailable-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.mtbc-unavailable-icon {
    font-size: 48px;
}

.mtbc-unavailable-message p {
    color: #f57c00;
    font-size: 16px;
    margin: 0;
    max-width: 500px;
    line-height: 1.6;
}

/* Service Options */
.mtbc-service-options {
    margin-top: 15px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 4px;
}

.mtbc-service-options h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.mtbc-service-options ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.mtbc-service-options li {
    font-size: 13px;
    margin-bottom: 5px;
    color: #666;
}

/* Booking Info Section - Passenger Count & Availability */
.mtbc-booking-info {
    order: 2;
}

/* Passenger Summary Section */
.mtbc-passenger-summary {
    margin-bottom: 12px;
}

.mtbc-passenger-text {
    margin: 0;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    font-weight: 500;
    text-align: center;
}

/* Availability Info Section */
.mtbc-availability-info {
    padding: 10px 14px;
    border-radius: 6px;
    margin-top: 10px;
    text-align: center;
}

.mtbc-seats-text {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mtbc-seats-icon {
    font-size: 16px;
    line-height: 1;
}

/* Status Colors */
.mtbc-seats-available {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.mtbc-seats-available .mtbc-seats-icon {
    color: #28a745;
}

.mtbc-booking-info .mtbc-availability-info.mtbc-seats-low {
    background: #ff9800;
    border: 1px solid #e65100;
    color: #fff;
    animation: pulse-warning 2s ease-in-out infinite;
}

.mtbc-booking-info .mtbc-availability-info.mtbc-seats-low .mtbc-seats-text {
    background: #ff9800 !important;
    color: #fff !important;
}

.mtbc-seats-low .mtbc-seats-icon {
    color: #ffc107;
}

.mtbc-urgency {
    font-weight: 700;
    color: #d39e00;
}

.mtbc-seats-full {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.mtbc-seats-full .mtbc-seats-icon {
    color: #dc3545;
}

/* Pulse animation for low seats warning */
@keyframes pulse-warning {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 193, 7, 0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mtbc-availability-error,
    .mtbc-availability-unavailable,
    .mtbc-availability-loading {
        padding: 30px 15px;
        min-height: 150px;
    }
    
    .mtbc-error-icon,
    .mtbc-unavailable-icon {
        font-size: 36px;
    }
    
    .mtbc-loading-spinner {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }
    
    .mtbc-error-message p,
    .mtbc-unavailable-message p,
    .mtbc-availability-loading p {
        font-size: 14px;
    }
    
    /* Booking Info Responsive */
    .mtbc-booking-info {
        padding: 14px 16px;
        margin-top: 16px;
    }
    
    .mtbc-passenger-text {
        font-size: 14px;
    }
    
    .mtbc-availability-info {
        padding: 8px 10px;
        margin-top: 8px;
    }
    
    .mtbc-seats-text {
        font-size: 13px;
        flex-direction: column;
        text-align: center;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .mtbc-booking-info {
        padding: 12px;
    }
    
    .mtbc-passenger-text {
        font-size: 13px;
    }
    
    .mtbc-seats-text {
        font-size: 12px;
    }
}

/* Departure from badge on trip cards */
.trabica-departure-from {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: center;
    gap: 6px;
    font-size: 0.82em;
    color: inherit;
    white-space: nowrap;
    margin-left: 12px;
}

.trabica-departure-from .departure-from-icon {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

/**
 * ============================================================
 * Checkout Design — TravelGenius client mockup implementation
 * ============================================================
 */
/* ----------------------------------------------------------
   1. Warning box (Latin-character passport notice)
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   GENERAL TYPOGRAPHY UPDATES
   ---------------------------------------------------------- */
form.woocommerce-checkout p, 
.trabica-checkout-warning p, 
.trabica-checkout-security-desc,
.trabica-payment-methods-desc,
.woocommerce-billing-fields,
p.form-row.validate-required, 
p.form-row.terms.custom-checkbox {
    font-size: 0.875rem !important;
}

form.woocommerce-checkout h1,
form.woocommerce-checkout h2,
form.woocommerce-checkout h3,
form.woocommerce-checkout h4,
.trabica-payment-methods-heading {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

/* ----------------------------------------------------------
   CHECKOUT STRUCTURE & LAYOUT
   ---------------------------------------------------------- */
form.woocommerce-checkout .booking-submission, 
.booking-submission {
    flex: 2 !important;
}

form.woocommerce-checkout .order-summary {
    flex: 1 !important;
}

.trabica-checkout-warning {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    background-color: #fffbeb !important;
    border: 1px solid #fef3c6;
    border-radius: 25px;
    padding: 10px;
    margin-bottom: 20px;
    color: #7b3306;
}

.trabica-checkout-warning .trabica-warning-icon {
    flex-shrink: 0;
   
    font-size: 18px;
    line-height: 1.4;
    color: #f5a623;
}

/* ----------------------------------------------------------
   RIGHT PANEL: PRODUCT CARD & BADGES
   ---------------------------------------------------------- */
.trabica-package-badge {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--togo-accent-color, #1a73e8);
}

.trabica-booking-details-grid {
    border-top: 1px solid #0000000f;
    margin-top: 15px;
    padding: 15px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 30px;
}

.trabica-booking-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: nowrap;
}

span.trabica-booking-label {
    font-size: 0.875rem;
    color: var(--togo-text-color-02, #6b7280);
    flex-shrink: 0;
}

span.trabica-booking-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #000;
    text-align: right;
}

/* ----------------------------------------------------------
   SECURITY & TRUST SECTION
   ---------------------------------------------------------- */
.trabica-checkout-security {
    background-color: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.04);
    border-radius: 20px;
    padding: 25px;
    margin-top: 25px;
    height: 290px;
    font-size: 14px !important;
}

.trabica-checkout-security-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.trabica-checkout-security-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trabica-checkout-security-list li {
    line-height: 1.8;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trabica-checkout-security-list li::before {
    content: '✓';
    color: var(--togo-tone-color-03, #22c55e);
    font-weight: 700;
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   AVAILABILITY BADGE
   ---------------------------------------------------------- */
.trabica-checkout-seat-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 15px 30px;
    background: #edf7ff;
    border: 1px solid #b7d8ff96;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 300;
    color: #1f3368;
    width: fit-content;
    position: relative;
    z-index: 999;
}

/* ----------------------------------------------------------
   SUBMIT AREA & CHECKBOXES
   ---------------------------------------------------------- */
.trabica-checkout-submit-area {
    margin-top: 16px;
}

.trabica-checkout-submit-area .form-row.terms label {
    display: block !important;
    cursor: pointer;
}

/* ----------------------------------------------------------
   PAYMENT METHODS & DEPOSITS
   ---------------------------------------------------------- */
.customer_payment {
    border: 1px solid var(--togo-border-color-04, #e8e8e8);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    background-color: #fff;
}

/* Class-based payment accordion — hides all payment boxes by default.
   JS adds/removes .trabica-payment-active on the parent <li> to show the active one.
   Using !important ensures these rules override WooCommerce's own inline-style toggling,
   which may be blocked by Trusted Types CSP on WPML/translated pages. */
#payment .payment_box {
    display: none !important;
}
#payment li.trabica-payment-active .payment_box {
    display: block !important;
}

.wc_payment_methods li {
    border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 10px;
}

.wc_payment_methods li:hover {
    border-color: #1F3368 !important;
}

.order_deposit_options li {
    border: 1px solid var(--togo-border-color-04, #e8e8e8);
    border-radius: 10px;
    padding: 14px 16px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.order_deposit_options li:hover {
    border-color: var(--togo-accent-color, #1a73e8);
}

/* ----------------------------------------------------------
   TABLES & CART SUMMARY
   ---------------------------------------------------------- */
.woocommerce-checkout-review-order-table .cart-subtotal, 
.woocommerce-checkout-review-order-table .order-total {
    padding: 1.5rem;
    border-top: 1px solid var(--togo-border-color-04);
    display: flex;
    background-color: var(--togo-border-color-03);
    align-items: flex-start !important;
    justify-content: space-between;
    gap: 20px !important;
}

.cart-subtotal .label {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ----------------------------------------------------------
   MISC FIXES
   ---------------------------------------------------------- */
form.woocommerce-checkout .customer_details textarea.input-text {
    font-family: 'Geologica', sans-serif;
}

form.woocommerce-checkout .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper {
    row-gap: 5px !important;
}

/*checkout-en*/
.elementor-13675 .elementor-element.elementor-element-34b17dc6 .woocommerce-form__label-for-checkbox
 {
    font-size: 16px !important;
}

/* Payment methods — second card (sibling of customer_review) */
.customer_payment {
    border: 1px solid var(--togo-border-color-04, #e8e8e8);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    background-color: #fff;
}

/* ----------------------------------------------------------
   STRIPE & PAYMENT METHODS TYPOGRAPHY
   ---------------------------------------------------------- */

/* Κείμενο δίπλα στο radio button (π.χ. Credit / Debit Card) */
.wc_payment_method > label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* Κείμενο "Αποθήκευση στοιχείων πληρωμής" και λοιπά p/labels */
.wc_payment_method .payment_box p,
.wc_payment_method .payment_box label,
.wc_payment_method .woocommerce-SavedPaymentMethods-saveNew label {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}

/* Headings μέσα στο payment section αν υπάρχουν */
.wc_payment_method h3, 
.wc_payment_method h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

.u-fs-sm {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}

/* ----------------------------------------------------------
   STRIPE KLARAMA TYPOGRAPHY
   ---------------------------------------------------------- */

/* Κείμενο "Αποθήκευση στοιχείων πληρωμής" και labels μέσα στο κουτί της Klarna */
.payment_method_stripe_klarna .payment_box p,
.payment_method_stripe_klarna .payment_box label,
.payment_method_stripe_klarna .woocommerce-SavedPaymentMethods-saveNew label {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}

/* Headings αν υπάρχουν εντός του συγκεκριμένου payment box */
.payment_method_stripe_klarna h3,
.payment_method_stripe_klarna h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

/*checkout*/
p.mtbc-passenger-text {
        font-size: 14px;
    color: #1f3368;
    margin-top: 15px;
    font-weight: 600;
}
}
.tg-checkout-trust {
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
}
textarea#order_comments::placeholder {
    font-family: 'Geologica';
    font-size: 13px;
}
#order_review {
    padding: 15px !important;
    border:none !important;
    box-shadow:none !important;
}
.awcdp-deposits-wrapper .awcdp-deposits-option {
    width: auto;
}
.awcdp-deposits-option:first-child {
    border: none ;
    position: relative;
    border-radius: 16px;
}
.awcdp-radio:hover {
    border-color: #1F3368 !important;
}


button#place_order {
    background: #1F3368 !important;
    padding: 15px 25px;
    border-radius: 24px;
    font-size: 16px;
}
button#place_order:hover{
    background-color:rgba(31, 51, 104, 0.77) !important;
}

.woocommerce td{ 
font-size:14.5px; } 

.woocommerce-checkout-review-order-table .product-name{ 
font-size:15px; 
font-weight:500; } 


/* Coupon link color */ 
.woocommerce-checkout-review-order-table .coupon-wrapper .open-coupon { 
color: var(--lux-navy) !important; 
font-size: 0.90rem !important;
font-weight: 600 !important;
} 


h2.checkout-title {
    font-size: 32px;
    margin-bottom: 15px;
}
form.woocommerce-checkout {
    display: flex;
    flex-wrap: nowrap;
    gap: 48px;
    align-items: flex-start;
}

.order-summary {
    padding: 0px !important;
}

.tg-checkout-trust {
    background: #ffffff !important;
    border: none !important;
    padding: 24px !important;
    font-size: 16px !important;
    margin: 0px !important;
}

.tg-trust-list li {
    gap: 0px !important;
    margin-bottom: 0px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

ul.tg-trust-list {
    padding-left: 20px;
}

.woocommerce-checkout-review-order-table .cart_item .product-name {
    font-family: "Geologica", Sans-serif;;
}

.woocommerce-checkout-review-order-table .cart-subtotal, .woocommerce-checkout-review-order-table .cart-discount, .woocommerce-checkout-review-order-table .fee, .woocommerce-checkout-review-order-table .tax-rate, .woocommerce-checkout-review-order-table .tax-total, .woocommerce-checkout-review-order-table .order-total {
    padding: 15px 24px!important;
}

/* "Due today" row — shown by JS when an ACO deposit option is selected */
#trabica-deposit-due-today {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background-color: #f0f4ff;
    border-top: 2px solid var(--togo-accent-color, #1F3368);
    font-weight: 700;
    font-size: 1rem;
    color: var(--togo-accent-color, #1F3368);
}

.woocommerce-checkout-review-order-table .cart_item .product-price, .woocommerce-checkout-review-order-table .cart_item .product-service, .woocommerce-checkout-review-order-table .cart_item .product-total {
    padding: 12px 24px!important;
}

.woocommerce-checkout-review-order-table .coupon-wrapper {
    padding: 15px 24px!important;
}

.booking-submission {
    flex: 2;
    min-width: 0;
}

.order-summary {
    position: sticky;
    flex: 1;
    min-width: 0;
    margin-top: 0px;
    margin-bottom: 0px;
    top: 152px;
}

@media (max-width: 1024px){
    form.woocommerce-checkout {
        flex-wrap: wrap;
    }
    .booking-submission,
    .order-summary {
        flex: 0 0 100%;
        min-width: 0;
    }
    .order-summary {
        position: relative !important;
        top: 0px;
        order: 3 !important;
    }
}

/*checkout*/




/* ----------------------------------------------------------
   10. Responsive — ≤1024px
   ---------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .trabica-checkout-security,
    .trabica-checkout-seat-badge,
    .trabica-checkout-cta-wrap {
        /* Already flows correctly inside .order-summary which stacks to top on mobile */
    }

    .trabica-booking-row {
        flex-direction: column;
        gap: 2px;
    }

    .trabica-booking-value {
        text-align: left;
    }
}

@media screen and (max-width: 600px) {
    .trabica-checkout-warning {
        font-size: 13px;
    }

    .trabica-booking-details-grid {
        padding: 12px 16px;
    }
}


/* =============================================================================
   THANK YOU PAGE  (trabica-ty)
   Scenario A — deposit  → .ty-scenario-a  (blue  #3B7DD8)
   Scenario B — full pay → .ty-scenario-b  (green #4C8B2B)
   ========================================================================== */

/* ── CSS custom properties ──────────────────────────────────────────────── */
.ty-scenario-a {
    --ty-accent:       #3B7DD8;
    --ty-accent-light: #EBF2FC;
    --ty-accent-dark:  #2c62b0;
}
.ty-scenario-b {
    --ty-accent:       #4C8B2B;
    --ty-accent-light: #EAF3DE;
    --ty-accent-dark:  #3a6c20;
}

/* ── Outer wrapper ──────────────────────────────────────────────────────── */
.trabica-ty {
    max-width: 1080px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    font-family: inherit;
    color: #1a1a1a;
}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.ty-hero {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
}

.ty-hero__breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.ty-step {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #888;
    padding: 0.3rem 0.75rem;
    border: 1.5px solid #ddd;
    border-radius: 999px;
}

.ty-step--active {
    color: var(--ty-accent);
    border-color: var(--ty-accent);
    background: var(--ty-accent-light);
}

.ty-step--active::before {
    content: '✓';
    font-size: 0.75rem;
}

.ty-hero__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.ty-check-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--ty-accent);
    color: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
}

.ty-check-circle svg {
    width: 38px;
    height: 38px;
}

.ty-hero__title {
    font-size: 2rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 0.75rem;
    line-height: 1.25;
}

.ty-hero__subtitle {
    font-size: 1.05rem;
    color: #555;
    max-width: 600px;
    margin: 0 auto 1.25rem;
    line-height: 1.6;
}

.ty-hero__ref {
    display: inline-block;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    color: #333;
}

.ty-hero__ref strong {
    color: var(--ty-accent);
    font-weight: 700;
}

/* ── Two-column body ─────────────────────────────────────────────────────── */
.ty-body {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

.ty-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ty-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 2rem;
}

/* ── Card base ───────────────────────────────────────────────────────────── */
.ty-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.ty-card__heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 1.25rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
}

.ty-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ty-accent-light);
    color: var(--ty-accent);
    flex-shrink: 0;
}

.ty-card__icon svg {
    width: 18px;
    height: 18px;
}

.ty-card__subheading {
    font-size: 0.95rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 0.3rem;
}

.ty-card__meta {
    font-size: 0.82rem;
    color: #888;
    margin: 0 0 1rem;
}

/* ── Definition list (data rows) ─────────────────────────────────────────── */
.ty-dl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ty-dl__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.92rem;
}

.ty-dl__row:last-child {
    border-bottom: none;
}

.ty-dl__row dt {
    color: #666;
    font-weight: 400;
    flex-shrink: 0;
    max-width: 45%;
}

.ty-dl__row dd {
    color: #1a1a1a;
    font-weight: 500;
    text-align: right;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ty-dl__row--total dt,
.ty-dl__row--total dd {
    font-weight: 700;
    font-size: 1rem;
    color: #111;
}

/* Compact variant for sidebar */
.ty-dl--compact .ty-dl__row {
    padding: 0.45rem 0;
    font-size: 0.875rem;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.ty-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ty-badge--paid {
    background: #EAF3DE;
    color: #3a6c20;
}

.ty-badge--pending {
    background: #FFF3E0;
    color: #b45309;
}

.ty-check-small {
    color: var(--ty-accent);
    font-weight: 700;
    font-size: 0.85rem;
}

/* ── Alert boxes ─────────────────────────────────────────────────────────── */
.ty-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.88rem;
    line-height: 1.55;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-top: 1rem;
}

.ty-alert--amber {
    background: #FAEEDA;
    color: #7c4a00;
    border-left: 3px solid #f0a500;
}

.ty-alert--amber::before {
    content: '⚠';
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.ty-alert--green {
    background: #EAF3DE;
    color: #2e5c10;
    border-left: 3px solid var(--ty-accent);
}

.ty-alert--green::before {
    content: '✓';
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--ty-accent);
}

/* ── Next Steps list ─────────────────────────────────────────────────────── */
.ty-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ty-step-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.92rem;
}

.ty-step-item:last-child {
    border-bottom: none;
}

.ty-step-item__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--ty-accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.ty-step-item > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.2rem;
}

.ty-step-item strong {
    color: #111;
    font-weight: 600;
}

.ty-step-item span {
    color: #777;
    font-size: 0.85rem;
}

/* ── Package thumbnail ───────────────────────────────────────────────────── */
.ty-card--package-img {
    padding: 0;
    overflow: hidden;
}

.ty-pkg-thumb {
    width: 100%;
    height: 175px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.ty-pkg-thumb__overlay {
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
    border-radius: 0 0 12px 12px;
}

.ty-pkg-thumb__label {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* ── Contact list ────────────────────────────────────────────────────────── */
.ty-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ty-contact-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.ty-contact-list__icon {
    display: flex;
    align-items: center;
    color: var(--ty-accent);
    flex-shrink: 0;
}

.ty-contact-list__icon svg {
    width: 18px;
    height: 18px;
}

.ty-contact-list a {
    color: #333;
    text-decoration: none;
    transition: color .15s;
}

.ty-contact-list a:hover {
    color: var(--ty-accent);
}

/* ── Related packages list ───────────────────────────────────────────────── */
.ty-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ty-related-list__item {
    display: block;
    padding: 0.55rem 0.85rem;
    background: #f7f7f7;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.ty-related-list__item:hover {
    background: var(--ty-accent-light);
    color: var(--ty-accent-dark);
}

/* ── Genius Passport full-width block ────────────────────────────────────── */
.ty-passport {
    display: none; /* hidden until feature is ready — remove this line to re-enable */
    margin-top: 1.5rem;
    background: #fafafa;
}

.ty-passport__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.ty-passport__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 12px;
    background: var(--ty-accent-light);
    color: var(--ty-accent);
}

.ty-passport__icon svg {
    width: 28px;
    height: 28px;
}

.ty-passport__heading {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 0.25rem;
}

.ty-passport__desc {
    font-size: 0.88rem;
    color: #666;
    margin: 0;
}

/* ── Bank transfer details block ─────────────────────────────────────────── */
.ty-bacs {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid #f0f0f0;
}

.ty-bacs__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.75rem;
}

.ty-bacs__dl {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    margin-bottom: 0.75rem;
}

.ty-bacs__iban {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    letter-spacing: .04em;
    font-weight: 600;
}

.ty-bacs__ref-note {
    font-size: 0.85rem;
    color: #555;
    margin: 0;
    padding: 0.5rem 0.85rem;
    background: #fff8ec;
    border-radius: 6px;
    border-left: 3px solid #f0a500;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 900px) {
    .ty-body {
        grid-template-columns: 1fr;
    }

    .ty-sidebar {
        position: static;
    }
}

@media screen and (max-width: 600px) {
    .trabica-ty {
        padding: 1rem 0.75rem 3rem;
    }

    .ty-hero__title {
        font-size: 1.55rem;
    }

    .ty-hero__subtitle {
        font-size: 0.95rem;
    }

    .ty-card {
        padding: 1.1rem;
    }

    .ty-passport__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .ty-dl__row {
        flex-direction: column;
        gap: 0.15rem;
    }

    .ty-dl__row dd {
        text-align: left;
        justify-content: flex-start;
    }

    .ty-hero__breadcrumb {
        flex-direction: column;
        gap: 0.4rem;
    }
}