:root {
    --bg-gradient: linear-gradient(135deg, #121417 0%, #1a1c20 100%);
    --card-bg-color: #24272c;
  
    --primary-glow: rgba(220, 53, 69, 0.2);
    --primary-color: #dc3545; 
    --primary-hover-color: #c82333; 

    --success-glow: rgba(40, 167, 69, 0.2);
    --success-color: #28a745;
    --success-hover-color: #218838;
    
    --text-color: #e5e5e5;
    --text-muted-color: #888;
    --border-color: #333842;
    --danger-color: #ff4444; 
}

body{background:var(--bg-gradient);color:var(--text-color);font-family:Poppins,sans-serif;padding-top:40px;padding-bottom:50px}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.header-container{text-align:center;margin-bottom:40px;animation:fadeInUp .5s ease-out}.header-container .logo{display:flex;justify-content:center;align-items:center;gap:15px;font-size:2.2rem;font-weight:700;color:var(--primary-color)}.header-container .tagline{font-size:1rem;color:var(--text-muted-color);margin-top:-5px;font-weight:300}.card-custom{background-color:var(--card-bg-color);border:1px solid var(--border-color);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.3);transition:all .3s ease;animation:fadeInUp .6s ease-out forwards;opacity:0}.summary-card{animation-delay:.2s}.card-header-custom{padding:20px 25px;border-bottom:1px solid var(--border-color);font-size:1.25rem;font-weight:600}.card-body-custom{padding:30px}.form-label-custom{font-size:.9rem;font-weight:500;margin-bottom:8px;color:var(--text-muted-color)}.input-group-custom{position:relative}.input-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--text-muted-color);transition:color .3s ease;pointer-events:none}.form-control-custom{background-color:#1a1c20;border:1px solid var(--border-color);border-radius:10px;color:var(--text-color);width:100%;height:52px;padding:0 20px 0 50px;font-size:1rem;transition:all .3s ease}.form-control-custom:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 4px var(--primary-glow);background-color:var(--card-bg-color)}.form-control-custom:focus+.input-icon,.input-group-custom:focus-within .input-icon{color:var(--primary-color)}select.form-control-custom{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1.2rem center;background-size:1em}.btn-custom-animated{background:var(--primary-color);color:#fff;border:none;border-radius:10px;padding:15px 20px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;letter-spacing:.5px;box-shadow:0 5px 15px rgba(0,0,0,.2)}.btn-custom-animated:hover{transform:translateY(-3px);background:var(--primary-hover-color);box-shadow:0 8px 25px var(--primary-glow)}.btn-custom-animated.primary-action{background:var(--success-color)}.btn-custom-animated.primary-action:hover{background:var(--success-hover-color);box-shadow:0 8px 25px var(--success-glow)}.quote-item{display:flex;justify-content:space-between;align-items:center;padding:18px 10px;border-bottom:1px solid var(--border-color);animation:popIn .4s ease-out}.quote-item:last-child{border-bottom:none}.item-title{font-weight:500;margin-bottom:2px}.item-meta{font-size:.85rem;color:var(--text-muted-color);margin-bottom:0}.item-price p{font-weight:600;font-size:1.1rem;margin:0;text-align:right}.btn-remove{background:rgba(255,255,255,.05);border:1px solid var(--border-color);color:var(--text-muted-color);cursor:pointer;transition:all .3s ease;border-radius:8px;width:36px;height:36px;margin-left:15px}.btn-remove:hover{color:var(--danger-color);border-color:var(--danger-color);background-color:rgba(255,68,68,.1)}.total-section-wrapper{animation:popIn .4s ease-out}.total-section{display:flex;justify-content:space-between;align-items:center;padding:25px;margin-top:20px;border-radius:12px;background:var(--bg-gradient);border:1px solid var(--primary-color);box-shadow:0 0 20px var(--primary-glow)}.total-label{font-size:1.2rem;font-weight:500}.total-price{font-size:2.2rem;font-weight:700;color:var(--primary-color)}.client-details-section{margin-top:30px;padding-top:30px;border-top:1px solid var(--border-color);animation:popIn .4s ease-out}.client-details-header{text-align:center;font-weight:600;margin-bottom:20px;color:var(--text-color);font-size:1.2rem}




/* --- ADD THIS AT THE END OF style.css --- */

/* ============================================= */
/*  RESPONSIVE DESIGN FOR MAIN CALCULATOR        */
/* ============================================= */

/* For Tablets and smaller devices (less than 992px) */
@media (max-width: 991.98px) {
    .header-container .logo {
        font-size: 1.8rem; /* Make header text smaller */
    }
}

/* For Mobile devices (less than 768px) */
@media (max-width: 767.98px) {
    body {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .header-container {
        margin-bottom: 20px;
    }
    .header-container .logo {
        font-size: 1.5rem;
        gap: 10px;
    }
    .header-container .tagline {
        font-size: 0.9rem;
    }
    .card-body-custom {
        padding: 20px; /* Reduce padding inside cards */
    }
    .quote-item {
        flex-direction: column; /* Stack item details and price */
        align-items: flex-start;
        gap: 10px;
    }
    .item-price {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--bg-color);
        padding: 10px;
        border-radius: 8px;
    }
    .total-section {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
    .total-price {
        font-size: 1.8rem;
    }
}



/* ============================================= */
/*  STYLING FOR PACKAGES STOREFRONT              */
/* ============================================= */

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.package-card {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

.package-card-header {
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-color);
}

.package-card-header h3 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--primary-color);
}

.package-card-body {
    padding: 25px;
    flex-grow: 1; /* Yeh body ko bachi hui jagah lene par majboor karega */
}

.package-inclusions {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-color);
}

.package-card-footer {
    padding: 20px 25px;
    background-color: #1a1c20; /* Thora dark background */
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.package-price small {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.package-price span {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.btn-view-details {
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-view-details:hover {
    background: var(--primary-hover-color);
}

.custom-quote-cta {
    text-align: center;
    background-color: var(--card-bg-color);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}
.custom-quote-cta h3 {
    margin-top: 0;
}





/* ============================================= */
/*  STYLING FOR PACKAGE DETAILS PAGE             */
/* ============================================= */
.back-link {
    color: var(--text-muted-color);
    text-decoration: none;
    font-size: 1.5rem;
    margin-right: 15px;
    transition: color 0.3s ease;
}
.back-link:hover {
    color: var(--primary-color);
}
.details-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: stretch; /* Yeh nayi value hai */
}
@media (max-width: 991.98px) {
    .details-layout {
        grid-template-columns: 1fr;
    }
}
.option-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}
.option-group input[type="radio"] {
    display: none; /* Asal radio button ko chupa dein */
}
.option-group label {
    display: block;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.option-group input[type="radio"]:checked + label {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 500;
}
.option-group label.disabled {
    background-color: var(--card-bg-color);
    color: var(--text-muted-color);
    cursor: not-allowed;
    opacity: 0.5;
}
.dynamic-price-display {
    text-align: center;
    background-color: #1a1c20;
    padding: 20px;
    border-radius: 12px;
    margin: 30px 0;
}
.dynamic-price-display p {
    margin: 0;
    color: var(--text-muted-color);
    font-size: 1rem;
}
.dynamic-price-display h2 {
    margin: 5px 0 0 0;
    font-size: 2.5rem;
    color: var(--success-color);
    font-weight: 700;
}

/* ============================================= */
/*  FIXES FOR PACKAGE DETAILS PAGE LAYOUT        */
/* ============================================= */

/* Page ki max-width set kar rahe hain taake content phela hua na lage */
.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Header ke neeche ek line add kar rahe hain */
.header-container {
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}

/* Header ke text ka size chota kar rahe hain aur arrow ko align kar rahe hain */
.header-container .logo {
    font-size: 1.8rem; /* Size chota kiya */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Arrow aur text ke beech thora gap */
}

.header-container .logo h1 {
    font-size: 1.8rem; /* Explicitly size set kiya */
    margin: 0; /* Extra margin hataya */
}

/* Back arrow ka size theek kar rahe hain */
.back-link {
    font-size: 1.8rem;
    margin: 0;
}



/* =================================================================== */
/*  FINAL & CORRECTED CSS FOR VERTICAL CHECKOUT (WIDTH & SPACING FIX)  */
/* =================================================================== */

.checkout-vertical-layout {
    max-width: 700px; /* Poore page ki width ko control karna */
    margin: 0 auto; /* Page ko center mein rakhna */
}

/* Dono cards (summary aur form) ke neeche faasla */
.checkout-vertical-layout .card-custom {
    margin-bottom: 40px; /* Cards ke beech mein faasla */
}

/* --- Summary Card Styling --- */
.quote-item-mini { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--border-color); }
.quote-item-mini:first-of-type { padding-top: 0; }
.quote-item-mini:last-of-type { border-bottom: none; }
.item-title-mini { font-weight: 500; font-size: 1rem; margin: 0 0 4px 0; }
.item-meta-mini { font-size: 0.85rem; color: var(--text-muted-color); margin: 0; }
.item-price-mini p { font-weight: 600; font-size: 1rem; margin: 0; text-align: right; white-space: nowrap; margin-left: 20px; }


/* --- Form Card Styling --- */

/* Form ki width ko control karna */
.checkout-vertical-layout .form-card form {
    max-width: 500px;
    margin: 0 auto; /* Form ko card ke beech mein center karna */
}

/* Form ke Labels */
.checkout-vertical-layout .form-label-custom {
    display: block;
    font-weight: 500;
    color: #c0c0c0;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

/* Har input field ke group ke neeche faasla */
.checkout-vertical-layout .input-group-custom {
    margin-bottom: 25px;
}

/* Asal Input Fields (input, textarea) */
.checkout-vertical-layout .form-control-custom {
    background-color: #24272c;
    border: 1px solid #3e444c;
    color: var(--text-color);
    width: 100%;
    height: 54px;
    padding-left: 50px;
    font-size: 1rem;
    border-radius: 12px;
    transition: all 0.2s ease-in-out;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Placeholder text ka style */
.checkout-vertical-layout .form-control-custom::placeholder {
    color: #777;
}

/* Jab user field par click kare (focus) */
.checkout-vertical-layout .form-control-custom:focus {
    background-color: #2c3036;
    border-color: var(--primary-color);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 0 4px var(--primary-glow);
    outline: none;
}

/* Icon ka color bhi focus par tabdeel hoga */
.checkout-vertical-layout .input-group-custom:focus-within .input-icon {
    color: var(--primary-color);
}

/* Address wale field ki height */
.checkout-vertical-layout textarea.form-control-custom {
    height: auto;
    min-height: 130px;
    padding-top: 15px;
}

/* ============================================= */
/*  STYLING FOR HEADER SWITCH BUTTON             */
/* ============================================= */
.btn-header-switch {
    display: inline-block;
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
    padding: 10px 25px;
    border-radius: 50px; /* Gol button */
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-header-switch:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* Yeh class bootstrap se hai, isliye isko yahan define kar rahe hain */
.mb-4 {
    margin-bottom: 1.5rem !important;
}
.text-center {
    text-align: center !important;
}
.me-2 {
    margin-right: 0.5rem !important;
}