/*
Theme Name: Tattooshala Enterprise
Description: High-Performance Dark Vision Theme.
Version: 6.4 (Right Align, Clean Dropdowns, Mobile Fix)
*/

/* ==========================================================
   1. BASE VARIABLES & RESET
   ========================================================== */
:root {
    --ts-orange: #ff6600;
    --ts-dark: #000000;
    --ts-card: #111111;
    --ts-border: #222222;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { 
    background: var(--ts-dark); 
    color: #fff; 
    font-family: 'Montserrat', sans-serif; 
    margin: 0; 
    line-height: 1.6;
    overflow-x: hidden;
}

.cinzel { font-family: 'Cinzel', serif; }
.orange { color: var(--ts-orange) !important; }

/* ==========================================================
   2. HEADER & NAVIGATION (DESKTOP)
   ========================================================== */
.ts-header {
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ts-border);
    position: sticky; top: 0; z-index: 9999;
}

/* Push the menu to the right side */
.ts-nav-wrap {
    max-width: 1400px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 20px;
}

.ts-nav {
    margin-left: auto; /* Forces the entire nav block to the right */
}

/* Bulletproof WP Menu */
.ts-nav ul { 
    display: flex !important; 
    flex-direction: row; 
    justify-content: flex-end; /* Aligns links to the right */
    gap: 30px !important; 
    list-style: none !important; 
    margin: 0; 
    padding: 0; 
}

.ts-nav ul li { position: relative; list-style: none !important; }

/* NORMAL WHITE TEXT, SAFFRON HOVER */
.ts-nav ul li a { 
    background: transparent !important; 
    color: #fff !important; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 13px; 
    font-weight: 600; 
    transition: 0.3s; 
    display: block;
    padding: 10px 0; 
    border-radius: 0 !important;
}

.ts-nav ul li a:hover { 
    color: var(--ts-orange) !important; 
}

/* ==========================================================
   2b. DROPDOWN SUB-MENUS
   ========================================================== */
.ts-nav ul .sub-menu, .ts-nav ul .children {
    position: absolute; top: 100%; left: 0; margin-top: 5px;
    background: #0a0a0a; border: 1px solid var(--ts-border);
    min-width: 220px; padding: 0; border-radius: 5px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: 0.3s ease; z-index: 10000;
    display: flex !important; flex-direction: column !important; gap: 0 !important;
}

.ts-nav ul li:hover > .sub-menu, .ts-nav ul li:hover > .children {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* CLEAN DROPDOWN LINKS (Fixed spacing, no buttons) */
.ts-nav ul .sub-menu li a, .ts-nav ul .children li a {
    background: transparent !important;
    color: #fff !important;
    padding: 15px 20px !important; 
    text-transform: capitalize !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #1a1a1a !important; /* Adds clean spacing lines */
}

.ts-nav ul .sub-menu li:last-child a, .ts-nav ul .children li:last-child a {
    border-bottom: none !important;
}

.ts-nav ul .sub-menu li a:hover, .ts-nav ul .children li a:hover { 
    color: var(--ts-orange) !important; 
    background: #111 !important; /* Slight highlight on hover */
}

/* Hamburger Toggle */
.ts-hamburger {
    display: none; cursor: pointer; flex-direction: column; gap: 5px; z-index: 10001;
    margin-left: 30px;
}
.ts-hamburger span {
    width: 25px; height: 3px; background: var(--ts-orange); 
    border-radius: 2px; transition: 0.3s;
}

/* ==========================================================
   3. HERO SECTION & VIDEO BACKGROUND
   ========================================================== */
.ts-hero {
    position: relative; height: 80vh; min-height: 500px;
    background: var(--ts-dark); display: flex; align-items: center; justify-content: center; overflow: hidden;
}

video.ts-hero-bg, .ts-hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 1; opacity: 0.5;
}

.ts-hero-overlay { position: relative; z-index: 5; text-align: center; padding: 20px; width: 100%; }

.ts-hero-container, .ts-hero-form-container {
    width: 100%; display: flex; justify-content: flex-end !important;
    padding-right: 5%; z-index: 10; position: relative;
}

.ts-hero-form-wrapper, .ts-hero-card {
    background: rgba(0, 0, 0, 0.85) !important; padding: 30px;
    border-radius: 15px; border: 1px solid var(--ts-orange) !important;
    max-width: 400px; backdrop-filter: blur(10px);
    position: relative; z-index: 20; 
}

/* ==========================================================
   4. IOS OPTIMIZED INPUTS & FORMS
   ========================================================== */
input[type="text"], input[type="email"], input[type="tel"], 
input[type="password"], select, textarea, input[type="date"] {
    width: 100% !important; background: #0a0a0a !important;
    border: 1px solid #333 !important; color: #fff !important;
    padding: 16px !important; font-size: 16px !important; 
    border-radius: 8px !important; margin-bottom: 12px !important;
    -webkit-appearance: none;
}
input:focus { border-color: var(--ts-orange) !important; outline: none; }

input[type="file"] {
    background: #111 !important; padding: 10px !important;
    border: 1px dashed #444 !important; cursor: pointer; font-size: 14px !important;
}
input[type="file"]::-webkit-file-upload-button {
    background: #000; color: var(--ts-orange); border: 1px solid var(--ts-orange);
    padding: 8px 15px; border-radius: 4px; text-transform: uppercase;
    font-weight: bold; font-size: 10px; margin-right: 10px; cursor: pointer; transition: 0.3s;
}
input[type="file"]::-webkit-file-upload-button:hover { background: var(--ts-orange); color: #000; }

/* ==========================================================
   5. PREMIUM BUTTONS & ALIGNMENT
   ========================================================== */
.ts-view-btn, .button.add_to_cart_button, .button.product_type_simple {
    position: relative; z-index: 99 !important; 
    background: #000 !important; color: var(--ts-orange) !important;
    border: 1px solid var(--ts-orange) !important;
    padding: 14px 24px !important; text-transform: uppercase; 
    font-weight: 800; font-size: 12px; border-radius: 5px; 
    cursor: pointer; transition: 0.3s; text-align: center; 
    text-decoration: none; display: inline-block;
}
.ts-view-btn:hover, .add_to_cart_button:hover {
    background: var(--ts-orange) !important; color: #000 !important;
}

.ts-academy-grid .ts-enroll-btn, .ts-enroll-btn, .ts-submit-btn, .ts-btn-orange {
    position: relative; z-index: 99 !important; 
    background: var(--ts-orange) !important; color: #000 !important;
    border: none !important; display: block !important;
    visibility: visible !important; opacity: 1 !important;
    font-weight: 800 !important; border-radius: 5px;
    padding: 15px !important; margin-top: 15px; text-align: center; text-decoration: none;
}

.ts-studio-card .ts-view-btn, 
.ts-studio-card .ts-submit-btn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    height: 45px !important; padding: 0 10px !important; margin: 0 !important;
    font-size: 12px !important; box-sizing: border-box; width: 100%;
}

/* ==========================================================
   6. GRIDS & CARDS (STUDIO, ACADEMY, WOOCOMMERCE)
   ========================================================== */
.ts-studio-grid, .ts-academy-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; padding: 40px 0;
}

.ts-studio-card, .ts-course-card {
    position: relative; height: 420px; border-radius: 15px; overflow: hidden; border: 1px solid var(--ts-border);
    background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 30px; transition: 0.3s ease;
}

.ts-studio-card > *, .ts-course-card > * { position: relative; z-index: 5; }
.ts-studio-card::before, .ts-course-card::before {
    content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,1) 10%, rgba(0,0,0,0.2) 100%); z-index: 1; 
}
.ts-studio-card:hover { border-color: var(--ts-orange); transform: translateY(-5px); }

.ts-academy-grid .ts-course-card { height: 100%; min-height: 480px; justify-content: space-between; border: 2px solid var(--ts-orange) !important; }
.ts-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.ts-product-card { background: #111; border: 1px solid var(--ts-border); padding: 20px; border-radius: 12px; text-align: center; position: relative; z-index: 2; }
.ts-prod-price { color: var(--ts-orange); font-size: 20px; font-weight: bold; display: block; margin: 10px 0; }

/* ==========================================================
   7. DASHBOARD & UI ELEMENTS
   ========================================================== */
.status-pill {
    padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 800; text-transform: uppercase;
    border: 1px solid; background: rgba(0,0,0,0.3);
}
.ts-dashboard-table tr:hover { background: rgba(255,102,0,0.05); transition: 0.3s; }
.dashicons-whatsapp { vertical-align: middle; margin-right: 5px; }


/* ==========================================================
   8. RESPONSIVE / MOBILE QUERIES (ULTIMATE FIX)
   ========================================================== */
@media (max-width: 992px) {
    .ts-hamburger { display: flex; }
    
    .ts-nav-wrap { justify-content: space-between; gap: 0; }
    
    /* The Slide-Out Panel */
    .ts-nav {
        position: fixed !important; 
        top: 0 !important; 
        right: -100% !important; 
        width: 280px !important; 
        height: 100vh !important;
        background: #050505 !important; 
        transition: right 0.4s ease-in-out !important; 
        padding: 80px 30px !important;
        border-left: 1px solid var(--ts-border) !important; 
        z-index: 10000 !important;
        overflow-y: auto !important; /* Allows scrolling if menu is long */
    }
    .ts-nav.is-active { right: 0 !important; }
    
    /* Target the Menu List Directly */
    .ts-menu { 
        display: flex !important;
        flex-direction: column !important; 
        gap: 10px !important; 
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Mobile Links Styling */
    .ts-menu li {
        display: block !important;
        width: 100% !important;
    }

    .ts-menu li a { 
        display: block !important;
        padding: 12px 0 !important; 
        font-size: 15px !important; 
        color: #fff !important;
        border-bottom: 1px solid #1a1a1a !important;
        text-decoration: none !important;
    }
    
    /* Mobile Dropdown Fix */
    .ts-menu .sub-menu, .ts-menu .children {
        position: relative !important; 
        padding-left: 15px !important; 
        background: transparent !important;
        border: none !important;
        display: none !important; /* Hide dropdowns initially on mobile */
        top: 0 !important;
        margin-top: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Shows dropdown when parent is tapped (triggered by our JS) */
    .ts-menu li.is-open > .sub-menu,
    .ts-menu li.is-open > .children {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Hamburger to "X" Animation */
    .ts-hamburger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .ts-hamburger.is-active span:nth-child(2) { opacity: 0; }
    .ts-hamburger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .ts-hero-container, .ts-hero-form-container { 
        justify-content: center !important; padding-right: 0; 
    }
}
/* ==========================================================
   9. ABSOLUTE MOBILE MENU OVERRIDE
   ========================================================== */
@media (max-width: 992px) {
    /* Force the main list to display */
    #ts-nav ul.ts-menu {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
    }
    
    /* Force the list items to display */
    #ts-nav ul.ts-menu li {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force the text to be white and visible */
    #ts-nav ul.ts-menu li a {
        display: block !important;
        color: #ffffff !important;
        font-size: 16px !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 15px 0 !important;
    }

    /* Sub-menu handling for mobile */
    #ts-nav ul.ts-menu .sub-menu {
        display: none !important; /* Kept hidden until tapped */
        padding-left: 20px !important;
    }
    
    #ts-nav ul.ts-menu li.is-open > .sub-menu {
        display: flex !important;
    }
}
/* ==========================================================
   10. WOOCOMMERCE DARK THEME OVERRIDES
   ========================================================== */

/* --- A. Inputs & Forms --- */
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.select2-container--default .select2-selection--single {
    width: 100% !important; 
    background: #0a0a0a !important;
    border: 1px solid #333 !important; 
    color: #fff !important;
    padding: 12px 16px !important; 
    font-size: 16px !important; 
    border-radius: 8px !important; 
    height: auto !important;
    box-shadow: none !important;
}

.woocommerce form .form-row input.input-text:focus, 
.woocommerce form .form-row textarea:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ts-orange) !important; 
    outline: none !important;
}

/* Fix for WooCommerce Select2 Dropdowns (Country/State select) */
.select2-dropdown { background: #111 !important; border: 1px solid var(--ts-orange) !important; color: #fff !important; }
.select2-container--default .select2-results__option[aria-selected=true], 
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ts-orange) !important; color: #000 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff !important; }

/* --- B. Global Buttons --- */
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button, 
.woocommerce #respond input#submit {
    background: var(--ts-orange) !important;
    color: #000 !important;
    border-radius: 5px !important;
    padding: 12px 24px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    transition: 0.3s ease;
    border: 1px solid var(--ts-orange) !important;
}

.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover, 
.woocommerce #respond input#submit:hover {
    background: #fff !important;
    color: var(--ts-orange) !important;
}

/* Disabled buttons */
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] {
    background: #333 !important; color: #888 !important; border-color: #333 !important; cursor: not-allowed;
}

/* --- C. Shop Tables (Cart & Checkout Review) --- */
.woocommerce table.shop_table {
    border-collapse: separate;
    border-radius: 10px;
    border: 1px solid #333 !important;
    background: #111;
}

.woocommerce table.shop_table th, 
.woocommerce table.shop_table td {
    border-top: 1px solid #222 !important;
    color: #ccc;
    padding: 15px;
}

/* --- D. Checkout Payment Box --- */
#add_payment_method #payment, 
.woocommerce-cart #payment, 
.woocommerce-checkout #payment {
    background: #111 !important;
    border-radius: 10px;
}

#add_payment_method #payment div.payment_box, 
.woocommerce-cart #payment div.payment_box, 
.woocommerce-checkout #payment div.payment_box {
    background: #0a0a0a !important;
    color: #ccc !important;
    border-radius: 8px;
}

#add_payment_method #payment div.payment_box::before, 
.woocommerce-cart #payment div.payment_box::before, 
.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: #0a0a0a !important; /* Fixes the little triangle pointing up */
}

/* --- E. Notices & Alerts (The colored bars at the top) --- */
.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
    background: #111 !important;
    color: #fff !important;
    border-top-color: var(--ts-orange) !important;
    border-radius: 8px;
    border: 1px solid #333;
    border-top: 3px solid var(--ts-orange) !important;
}

.woocommerce-message::before, 
.woocommerce-info::before {
    color: var(--ts-orange) !important;
}

/* --- F. My Account Dashboard --- */
.woocommerce-MyAccount-navigation ul {
    list-style: none; padding: 0; border: 1px solid #333; border-radius: 10px; overflow: hidden;
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #222;
}

.woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; }

.woocommerce-MyAccount-navigation ul li a {
    display: block; padding: 15px 20px; color: #fff; text-decoration: none; transition: 0.3s;
}

.woocommerce-MyAccount-navigation ul li.is-active a, 
.woocommerce-MyAccount-navigation ul li a:hover {
    color: #000; background: var(--ts-orange); font-weight: bold;
}

/* Make account content area distinct */
.woocommerce-MyAccount-content {
    background: #111; padding: 30px; border-radius: 10px; border: 1px solid #222;
}
/* --- G. Form Labels & Checkboxes (Account & Address Fields) --- */

/* Force all input labels to be white and sit neatly above the fields */
.woocommerce form .form-row label {
    display: block !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* Make the required asterisk (*) Saffron instead of default red */
.woocommerce form .form-row label abbr.required {
    color: var(--ts-orange) !important;
    text-decoration: none !important;
    border: none !important;
    font-weight: bold;
    margin-left: 3px;
}

/* Style the placeholder text inside the boxes so it's readable */
.woocommerce form .form-row input::placeholder,
.woocommerce form .form-row textarea::placeholder {
    color: #777777 !important;
    opacity: 1 !important;
    font-weight: normal !important;
}

/* Fix inline checkboxes (like "Create an account?" or "Ship to different address?") */
.woocommerce form .form-row .woocommerce-form__label-for-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer;
    color: #ffffff !important;
    font-weight: normal !important;
    margin-top: 10px !important;
}

/* Fix the actual checkbox squares */
.woocommerce form .form-row input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--ts-orange) !important; /* Makes the checkmark orange when clicked */
    cursor: pointer;
}
/* --- H. Force Vertical Stacking for Labels & Inputs --- */
.woocommerce form .form-row {
    display: flex !important;
    flex-direction: column !important; /* Forces vertical stacking */
    align-items: flex-start !important;
    margin-bottom: 20px !important;
    clear: both !important;
}

/* Ensure the wrapper that holds the input expands to full width */
.woocommerce form .form-row .woocommerce-input-wrapper {
    display: block !important;
    width: 100% !important;
}

/* Make sure half-width fields (like First Name / Last Name) still sit side-by-side on Desktop */
@media (min-width: 768px) {
    .woocommerce form .form-row-first, 
    .woocommerce form .form-row-last {
        width: 48% !important;
        display: flex !important;
        float: left !important;
    }
    .woocommerce form .form-row-last {
        float: right !important;
    }
}
/* ==========================================================
   11. HIDE DEFAULT PAGE TITLES
   ========================================================== */
/* Targets only standard pages so it doesn't break Studio or Product titles */
body.page .entry-title, 
body.page .page-title,
body.page header.entry-header h1,
body.page .type-page > h1 {
    display: none !important;
}
/* ==========================================================
   12. HEADER AUTHENTICATION BUTTON
   ========================================================== */
.ts-auth-btn {
    background: transparent !important;
    color: var(--ts-orange) !important;
    border: 1px solid var(--ts-orange) !important;
    padding: 8px 18px !important;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: 0.3s ease;
    white-space: nowrap;
}

.ts-auth-btn:hover {
    background: var(--ts-orange) !important;
    color: #000 !important;
}

@media (max-width: 992px) {
    .ts-header-actions { margin-left: auto; }
}
/* ==========================================================
   13. WOOCOMMERCE CHECKOUT BLOCKS (FLOATING LABEL FIX)
   ========================================================== */

/* Push the typed text down so it doesn't overlap the label */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-combobox .components-combobox-control__input {
    padding-top: 26px !important;
    padding-bottom: 8px !important;
    height: auto !important;
    background: #0a0a0a !important;
    color: #ffffff !important;
}

/* Make the resting floating label a clean gray */
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-block-components-combobox label {
    color: #888888 !important;
}

/* Make the label glow Saffron when you click inside the box */
.wc-block-checkout .wc-block-components-text-input.is-active label,
.wc-block-checkout .wc-block-components-text-input:focus-within label,
.wc-block-checkout .wc-block-components-combobox.is-active label {
    color: var(--ts-orange) !important;
}

/* Fix the dark mode text inside the Order Summary sidebar */
.wc-block-components-order-summary {
    background-color: #111111 !important;
    color: #ffffff !important;
}

.wc-block-components-order-summary-item__name, 
.wc-block-components-order-summary-item__quantity {
    color: #ffffff !important;
}

.wc-block-components-totals-item__value, 
.wc-block-components-totals-item__label {
    color: #cccccc !important;
}