/* Optimized cart.css */
:root { 
    --primary: #096192;
    --accent: #1171ba;
    --light-bg: #f8fafc;
    --success: #28a745;
}

body { background: #f1f5f9; font-family: 'Inter', sans-serif; color: #334155; }

/* Step Indicators & Containers */
.step-container { display: none; }
.step-container.active { display: block; animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.step-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}
.step-line { border-color: #dee2e6 !important; height: 1px; }

/* Cards & Selections */
.card { border-radius: 10px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.card-plan { cursor: pointer; border: 2px solid #e2e8f0; transition: 0.3s; position: relative; border-radius: 10px; }
.card-plan.selected { border-color: var(--primary); background: #f0f7ff; }
.config-card { border-left: 5px solid var(--primary); border-radius: 8px; }

/* Global Buttons Overrides */
.btn-primary { background-color: var(--primary) !important; border: none; }
.btn-primary:hover { background-color: var(--accent) !important; }
.btn-success { background-color: var(--success) !important; border: none; }

/* Sidebar Summary Area - Deep Navy theme */
.sticky-top { 
    background: #0f172a !important; 
    color: white !important; 
    border-radius: 12px;
    border: none !important;
}
.btn-warning { background-color: #38bdf8 !important; color: #fff !important; border: none; }
.btn-outline-warning { border-color: #38bdf8 !important; color: #38bdf8 !important; }
.btn-outline-warning:hover { background: #38bdf8 !important; color: #fff !important; }
#totalPrice { color: #38bdf8 !important; }

/* Gateway Payment Selectors */
.gateway-option {
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 10px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 55px;
    position: relative;
    background: #fff;
}
.gateway-option:hover { background: #f8fafc; border-color: var(--primary); }
.gateway-option input[type="radio"] { display: none; }

.gateway-option:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background-color: #f0f9ff;
    box-shadow: 0 2px 8px rgba(9, 97, 146, 0.15);
}
.gateway-icon { font-size: 1.4rem; color: #64748b; width: 30px; text-align: center; }
.gateway-option:has(input[type="radio"]:checked) .gateway-icon { color: var(--primary); }
.gateway-label { font-size: 0.9rem; font-weight: 600; line-height: 1; }

/* Error Handling & Animations */
.gateway-error {
    border-color: #dc3545 !important;
    background-color: #fff8f8 !important;
    animation: shake 0.4s ease-in-out;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}


    .domain-selector-box {
      border: 1px solid #e9ecef;
      border-radius: 6px;
      background-color: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }
    .domain-option-row {
      padding: 0.6rem 1rem;
      border-bottom: 1px solid #e9ecef;
      transition: background-color 0.15s ease;
      display: block; 
      width: 100%;
    }
    .domain-option-row:last-child {
      border-bottom: none;
    }
    .domain-option-row:hover {
      background-color: #fafbfc;
    }
    .panel-collapse {
      display: none; 
    }
    .domain-option-row.active {
      background-color: #f8fafc;
      padding-bottom: 0.8rem;
    }
    .domain-option-row.active .panel-collapse {
      display: block !important;
      margin-top: 0.5rem;
    }
    .domain-option-row .form-check-input[type="radio"] {
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
    }
    .domain-option-row .form-check {
      position: relative;
      padding-left: 26px !important;
      margin-bottom: 0;
      display: flex;
      align-items: center;
      min-height: 22px;
    }
    .domain-option-row .form-check-label::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      border: 2px solid #cbd5e1;
      border-radius: 50%;
      background-color: #fff;
      transition: all 0.15s ease;
    }
    .domain-option-row:hover .form-check-label::before,
    .domain-option-row.active .form-check-label::before {
      border-color: #1171ba;
    }
    .domain-option-row .form-check-label::after {
      content: "";
      position: absolute;
      left: 4px;
      top: 50%;
      transform: translateY(-50%) scale(0);
      width: 6px;
      height: 6px;
      background-color: #1171ba;
      border-radius: 50%;
      transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .domain-option-row.active .form-check-label::after {
      transform: translateY(-50%) scale(1);
    }
    .form-check-label {
      cursor: pointer;
      font-weight: 500;
      font-size: 0.9rem;
      color: #495057;
      user-select: none;
    }
    .domain-option-row.active .form-check-label {
      color: #000;
      font-weight: 600;
    }
    .domain-selector-box .form-control, 
    .domain-selector-box .form-select,
    .domain-selector-box .btn {
      padding: 0.35rem 0.75rem;
      font-size: 0.88rem;
      border-radius: 4px;
    }
    .domain-selector-box .input-group-text {
      padding: 0.35rem 0.6rem;
      font-size: 0.88rem;
      background-color: #f8f9fa;
      color: #6c757d;
    }
    @media (max-width: 767.98px) {
      .domain-selector-box .input-group {
        display: flex !important;
        flex-wrap: wrap !important;
        background: transparent !important;
        border: none !important;
        gap: 8px 0;
      }
      .domain-selector-box .input-group .form-control,
      .domain-selector-box .input-group #inputExist {
        flex: 1 1 auto !important;
        width: 1% !important;
        border-radius: 6px 0 0 6px !important;
        padding: 0.55rem 0.75rem !important;
      }
      .domain-selector-box .input-group .form-select {
        flex: 0 0 auto !important;
        width: 110px !important;
        max-width: 110px !important;
        border-radius: 0 6px 6px 0 !important;
        margin-left: -1px !important;
        padding: 0.55rem 0.75rem !important;
      }
      .domain-selector-box .input-group #inputExistExt {
        flex: 0 0 auto !important;
        width: 90px !important;
        border-radius: 0 6px 6px 0 !important;
        margin-left: -1px !important;
      }
      .domain-selector-box .input-group .search-trigger-btn {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-top: 8px !important;
        margin-left: 0 !important;
        border-radius: 6px !important;
        padding: 0.6rem 1rem !important;
        font-weight: 600 !important;
      }
      .domain-selector-box .input-group-text {
        display: none !important;
      }
    }