:root {
  --ih-primary: #0b2a63;
  --ih-secondary: #2b5797;
  --ih-success-bg: #e6f4ea;
  --ih-success-text: #1e7e34;
  --ih-bg-main: #f4f7fa;
  --ih-card-bg: #ffffff;
  --ih-text-dark: #14376f;
  --ih-text-muted: #64748b;
  --ih-border: #e2e8f0;
  --ih-shadow: 0 10px 30px rgba(11, 42, 99, 0.08);
}

/* Main Layout Wrapper */
.ih-product-layout {
    font-family: 'Poppins', sans-serif !important;
    margin-bottom: 40px !important;
    background: transparent !important;
}

/* Top Card Design */
.ih-top-card {
    background: var(--ih-card-bg) !important;
    border-radius: 16px !important;
    box-shadow: var(--ih-shadow) !important;
    display: flex !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
    overflow: hidden !important;
    border: 1px solid var(--ih-border) !important;
}

.ih-card-left {
    width: 30%;
    padding: 40px 20px;
    border-right: 1px solid var(--ih-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #f8fafc; /* Podi gray color ekak left panel ekata */
}

.ih-icon-box {
    width: 65px;
    height: 65px;
    background: var(--ih-primary) !important;
    color: #ffffff !important;
    font-size: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 15px rgba(11, 42, 99, 0.2) !important;
}

.ih-product-title {
    color: var(--ih-text-dark) !important;
    font-size: 22px !important;
      font-weight: 600;
    margin: 0 0 5px 0 !important;
}

.ih-product-type {
    color: var(--ih-text-muted) !important;
    font-size: 14px !important;
    margin-bottom: 15px !important;
}

.ih-badge {
    padding: 6px 20px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
      font-weight: 600;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 20px !important;
}
.ih-badge.status-active { background: var(--ih-success-bg) !important; color: var(--ih-success-text) !important; }
.ih-badge.status-pending { background: #fff3cd !important; color: #856404 !important; }
.ih-badge.status-suspended, .ih-badge.status-terminated { background: #f8d7da !important; color: #721c24 !important; }

.ih-cancel-btn {
    color: var(--ih-text-dark) !important;
    font-size: 13px !important;
    text-decoration: none !important;
      font-weight: 600;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: 0.2s !important;
    background: #f1f5f9 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
}
.ih-cancel-btn:hover { background: #fee2e2 !important; color: #ef4444 !important; }

.ih-card-right {
    width: 70%;
    padding: 40px;
    display: flex;
    align-items: center;
}

.ih-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.ih-info-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ih-info-item label {
    font-size: 12px !important;
    color: var(--ih-text-muted) !important;
    text-transform: uppercase !important;
      font-weight: 600;
    margin: 0 !important;
}
.ih-info-item span {
    font-size: 16px !important;
    color: var(--ih-primary) !important;
      font-weight: 600;
}

/* CUSTOM TABS OVERRIDE */
ul.ih-custom-tabs {
    border-bottom: 2px solid var(--ih-border) !important;
    margin: 0 0 25px 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 15px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

ul.ih-custom-tabs li.nav-item {
    margin: 0 !important;
}

ul.ih-custom-tabs a.nav-link {
    background: transparent !important;
    border: none !important;
    color: var(--ih-text-muted) !important;
      font-weight: 600;
    font-size: 15px !important;
    padding: 12px 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
}

ul.ih-custom-tabs a.nav-link:hover {
    color: var(--ih-primary) !important;
}

ul.ih-custom-tabs a.nav-link.active {
    color: var(--ih-primary) !important;
    border-bottom: 3px solid var(--ih-primary) !important;
}

/* Tab Content Card */
.ih-content-card {
    background: var(--ih-card-bg) !important;
    border-radius: 16px !important;
    box-shadow: var(--ih-shadow) !important;
    padding: 30px 40px !important;
    border: 1px solid var(--ih-border) !important;
}

.ih-data-row {
    display: flex;
    padding: 18px 0;
    border-bottom: 1px solid var(--ih-border);
    align-items: center;
}
.ih-data-row:last-child { border-bottom: none; }
.ih-data-label { width: 30%; color: var(--ih-text-muted); font-size: 14px;      font-weight: 600; }
.ih-data-value { width: 70%; color: var(--ih-text-dark); font-size: 15px;      font-weight: 600; }

/* FIX: Solid Buttons */
.ih-action-bar {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid var(--ih-border);
    display: flex;
    gap: 15px;
}

.ih-btn-solid {
    background: #f1f5f9 !important;
    color: var(--ih-text-dark) !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
      font-weight: 600;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: none !important;
    transition: 0.3s !important;
}
.ih-btn-solid:hover { background: #e2e8f0 !important; color: var(--ih-text-dark) !important; text-decoration: none !important; }

.ih-btn-solid.primary {
    background: var(--accent-color)!important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2) !important;
}
.ih-btn-solid.primary:hover {
    background: var(--primary-color) !important;
    box-shadow: 0 6px 15px rgba(13, 110, 253, 0.3) !important;
}

@media (max-width: 768px) {
    .ih-top-card { flex-direction: column; }
    .ih-card-left, .ih-card-right { width: 100%; border-right: none; }
    .ih-card-left { border-bottom: 1px solid var(--ih-border); }
    .ih-info-grid { grid-template-columns: 1fr; }
    .ih-data-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ih-data-label, .ih-data-value { width: 100%; }
}




/* =========================================
   PREMIUM BULK DOMAIN MANAGEMENT STYLES
   ========================================= */
.ih-content-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(11, 42, 99, 0.04) !important;
    padding: 40px !important;
    border: 1px solid #eaedf2 !important;
}

.ih-page-title {
    color: var(--ih-primary) !important;
      font-weight: 600;
    font-size: 25px !important;
    border-bottom: 1px solid #eaedf2 !important;
    padding-bottom: 20px !important;
    margin-bottom: 25px !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ih-bulk-info-text {
    color: var(--ih-text-muted);
    font-size: 16px;
    margin-bottom: 20px;
}

/* Domain Dashed Box */
.ih-domain-pill-container {
    background: #fcfdfd;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 25px;
    display: flex;
}

.ih-domain-pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 8px 18px;
    border-radius: 50px;
         font-weight: 600;
    color: var(--ih-text-dark);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.ih-domain-pill i {
    color: var(--ih-primary);
}

/* Radio Group Box */
.ih-radio-wrap {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 30px;
}

.ih-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
         font-weight: 600;
    font-size: 16px;
    color: var(--ih-primary);
    margin: 0;
    cursor: pointer;
}

/* Exact Input & Label Layout (Matching Image) */
.ih-form-wrapper {
    max-width: 650px; /* Keeps inputs from stretching too wide */
}

.ih-form-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.ih-form-label {
    width: 160px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--ih-primary);
         font-weight: 600;
    margin: 0;
}

.ih-input-wrap {
    flex-grow: 1;
}

.ih-form-control {
    width: 100%;
    padding: 12px 16px;
    background: #f4f6f9 !important; /* Soft grey background */
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    font-size: 14px;
    color: var(--ih-text-dark);
    transition: 0.3s;
    box-shadow: none !important;
}
.ih-form-control:focus {
    background: #ffffff !important;
    border-color: var(--ih-primary) !important;
    outline: none;
}
.ih-form-control:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Green Button from Image */
.ih-btn-green {
    background: var(--accent-color)!important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
      font-weight: 600;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 18px !important;
    margin-top: 10px;
    transition: 0.3s;
}
.ih-btn-green:hover {
    background: var(--primary-color) !important;
}

/* Small Outline Back Button */
.ih-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: var(--ih-text-muted);
    font-size: 12px;
         font-weight: 600;
    text-decoration: none;
    margin-top: 25px;
    transition: 0.2s;
}
.ih-back-link:hover {
    background: #f8fafc;
    color: var(--ih-text-dark);
    text-decoration: none;
}

@media (max-width: 768px) {
    .ih-form-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .ih-form-label {
        width: 100%;
    }
}


/* Title Icon Premium Design */
.ih-page-title i {
    background: #edf4ff; /* Soft blue background */
    color: var(--ih-primary) !important;
    padding: 10px 14px;
    border-radius: 12px;
    margin-right: 8px;
    font-size: 20px;
    transition: all 0.3s ease;
}

.ih-page-title i:hover {
    background: var(--ih-primary);
    color: #ffffff !important;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(11, 42, 99, 0.2);
}


/* Domain Dashed Box & Highlighted Pill */
.ih-domain-pill-container {
    background: #fcfdfd;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ih-domain-pill {
    background: #edf4ff !important; /* Highlight background */
    border: 1px solid #bcdcff !important;
    padding: 8px 18px;
    border-radius: 50px;
         font-weight: 600;
    color: var(--ih-primary) !important; /* Highlighted text */
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    cursor: default;
}

.ih-domain-pill i {
    color: #0d6efd !important;
    transition: all 0.3s ease;
}

/* Domain Pill Hover Effect */
.ih-domain-pill:hover {
    background: var(--ih-primary) !important;
    color: #ffffff !important;
    border-color: var(--ih-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(11, 42, 99, 0.15);
}

.ih-domain-pill:hover i {
    color: #ffffff !important;
}


/* =========================================
   DOMAIN DETAILS PAGE SPECIFIC STYLES
   ========================================= */

/* Overview Data Grid */
.ih-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
    background: #f8fafc;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid var(--ih-border);
}

.ih-overview-grid .ih-info-item {
    background: transparent;
}

.ih-overview-grid .ih-info-item a {
    color: var(--ih-primary);
    text-decoration: none;
    transition: 0.2s;
}
.ih-overview-grid .ih-info-item a:hover {
    color: #0d6efd;
}

/* Quick Action Tiles (What would you like to do today?) */
.ih-action-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.ih-action-box {
    background: #ffffff;
    border: 1px solid var(--ih-border);
    border-radius: 10px !important;
   padding: 15px 25px !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px !important;
    color: var(--ih-text-dark) !important;
         font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(11,42,99,0.02);
    min-width: 160px !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
}

.ih-action-box:hover {
    background: var(--accent-color) !important;
    border-color: var(--ih-primary);
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(11,42,99,0.12);
    transform: translateY(-3px);
}

.ih-action-box i {
    font-size: 22px;
    color: var(--ih-primary);
    transition: all 0.3s ease;
}

.ih-action-box:hover i {
    color: #ffffff;
}

/* Addon Rows Styling */
.ih-addon-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--ih-border);
    border-radius: 12px;
    margin-bottom: 20px;
    background: #ffffff;
    transition: 0.3s;
}
.ih-addon-row:hover {
    border-color: #bcdcff;
    box-shadow: 0 4px 15px rgba(11,42,99,0.05);
}
.ih-addon-icon {
    width: 65px;
    height: 65px;
    background: #edf4ff;
    color: var(--ih-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 26px;
    flex-shrink: 0;
}
.ih-addon-content {
    flex-grow: 1;
}
.ih-addon-title {
         font-weight: 600;
    color: var(--ih-text-dark);
    font-size: 16px;
    margin-bottom: 4px;
}
.ih-addon-desc {
    font-size: 13px;
    color: var(--ih-text-muted);
    margin: 0;
}
.ih-addon-actions form {
    margin: 0;
}

@media (max-width: 768px) {
    .ih-addon-row {
        flex-direction: column;
        text-align: center;
    }
}



/* =========================================
   DOMAIN DETAILS GRID FIXES
   ========================================= */

/* Stop elements from stretching and fix spacing */
.ih-overview-grid .ih-info-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important; /* Badge eka stretch wena eka nawaththanawa */
    justify-content: center;
    gap: 6px;
}

/* Premium Typography for Labels (Domain, Status, Date, etc.) */
.ih-overview-grid .ih-info-item label {
    font-size: 11px !important;
    color: #64748b !important;
      font-weight: 600;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin: 0 !important;
}

/* Premium Typography for Values */
.ih-overview-grid .ih-info-item > span {
    font-size: 15px !important;
      font-weight: 600;
    color: var(--ih-text-dark) !important;
}

/* Fix Status Badge Exact Width */
.ih-overview-grid .ih-badge {
    width: fit-content !important; /* Text eke ganatama badge eka hadanawa */
    margin: 2px 0 0 0 !important;
    padding: 6px 18px !important;
    font-size: 12px !important;
}

/* What would you like to do today - Title spacing fix */
.ih-page-title {
    margin-top: 15px;
    padding-bottom: 12px !important;
}

/* =========================================
   SUPPORT TICKET VIEW STYLES
   ========================================= */

/* Ticket Header */
.ih-ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ih-border);
}

.ih-ticket-title {
    color: var(--ih-text-dark);
    font-size: 22px;
         font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ih-ticket-title i {
    background: #edf4ff;
    color: var(--ih-primary);
    padding: 12px;
    border-radius: 12px;
    font-size: 20px;
}

.ih-ticket-subject {
    font-size: 15px;
    color: var(--ih-text-muted);
    margin-top: 8px;
    margin-left: 56px;
}

.ih-ticket-actions {
    display: flex;
    gap: 10px;
}

/* Ticket Thread (Messages) */
.ih-ticket-replies {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.ih-reply-card {
    background: #ffffff;
    border: 1px solid var(--ih-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(11, 42, 99, 0.03);
    transition: 0.3s;
}

/* Staff Reply Highlight */
.ih-reply-card.staff {
    background: #fcfdfd;
    border-color: #cbd5e1;
}

.ih-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background: #f8fafc;
    border-bottom: 1px solid var(--ih-border);
    flex-wrap: wrap;
    gap: 10px;
}

.ih-reply-card.staff .ih-reply-header {
    background: #edf4ff;
    border-bottom-color: #bcdcff;
}

.ih-reply-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--ih-text-dark);
         font-weight: 600;
}

.ih-reply-badge {
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 11px;
         font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ih-reply-badge.staff { background: var(--ih-primary); color: white; }
.ih-reply-badge.client {background: var(--accent-color)!important;color: white;}

.ih-reply-body {
    padding: 25px;
    color: #334155;
    font-size: 15px;
    line-height: 1.7;
}

.ih-reply-footer {
    padding: 15px 25px;
    background: #f8fafc;
    border-top: 1px dashed var(--ih-border);
    font-size: 13px;
    color: var(--ih-text-muted);
}

/* Attachments */
.ih-attachments-box {
    margin-top: 20px;
    padding: 20px;
    background: #f1f5f9;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
}

.ih-attachment-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border: 1px solid var(--ih-border);
    border-radius: 8px;
    font-size: 13px;
         font-weight: 600;
    color: var(--ih-primary);
    text-decoration: none;
    margin-right: 10px;
    margin-top: 10px;
    transition: 0.2s;
}

.ih-attachment-item:hover {
    background: var(--ih-primary);
    color: white;
    text-decoration: none;
    border-color: var(--ih-primary);
}

/* Reply Form Box */
.ih-reply-form-card {
    background: #ffffff;
    border: 1px solid var(--ih-border);
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(11, 42, 99, 0.05);
}

.ih-reply-form-card h3 {
    color: var(--ih-primary);
    font-size: 20px;
         font-weight: 600;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--ih-border);
}


/* =========================================
   SUPPORT TICKET LAYOUT FIXES
   ========================================= */

/* Fix Squished Form Fields */
.ih-reply-form-card .ih-form-group {
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

.ih-reply-form-card .ih-form-label {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
      font-weight: 600;
}

.ih-reply-form-card .ih-form-control,
.ih-reply-form-card .md-editor {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* Fix Attachment Input Group */
.ih-reply-form-card .attachment-group {
    display: flex !important;
    width: 100% !important;
    align-items: center;
}

/* Fix Ticket Header Subject Alignment */
.ih-ticket-header {
    align-items: flex-start !important;
}

.ih-ticket-subject {
    margin-left: 0 !important;
    margin-top: 10px !important;
    font-size: 14px !important;
}

.ih-ticket-title i {
    padding: 15px !important;
    font-size: 25px !important;
    /* height: 16px; */
    /* width: 10px; */
}


/* =========================================
   ATTACHMENT BUTTON ALIGNMENT FIX
   ========================================= */

/* Make the input group heights match */
.ih-reply-form-card .attachment-group {
    display: flex !important;
    align-items: stretch !important;
    height: 45px !important; /* Premium button height */
}

.ih-reply-form-card .custom-file {
    height: 100% !important;
}

/* Fix 'Choose File' label alignment */
.ih-reply-form-card .custom-file-label {
    height: 100% !important;
    display: flex !important;
    align-items: center;
    border-radius: 8px 0 0 8px !important;
    border: 1px solid #cbd5e1 !important;
    padding-left: 15px;
    font-size: 14px;
    color: var(--ih-text-muted);
}

/* Fix 'Browse' button inside the input */
.ih-reply-form-card .custom-file-label::after {
    height: 100% !important;
    display: flex !important;
    align-items: center;
    background: #f8fafc !important;
    border-left: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    color: var(--ih-text-dark);
         font-weight: 600;
    padding: 0 15px;
}

/* Fix '+ Add More' button alignment */
.ih-reply-form-card .input-group-append .btn {
    height: 100% !important;
    border-radius: 0 8px 8px 0 !important;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 20px !important;
      font-weight: 600;
    border: 1px solid #cbd5e1 !important;
    border-left: none !important;
}


/* =========================================
   OPEN TICKET - DEPARTMENT SELECTION (UPDATED COLORS)
   ========================================= */
.ih-department-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.ih-department-card {
    background: #ffffff;
    border: 1px solid var(--ih-border);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(11, 42, 99, 0.02);
}

/* Hover Effect with Accent/Green Color */
.ih-department-card:hover {
    border-color: var(--accent-color, #10b981); /* Accent eka hari green eka hari */
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.12); /* Soft green shadow */
    transform: translateY(-3px);
}

.ih-dept-icon {
    background: #edf4ff;
    color: var(--ih-primary);
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    transition: 0.3s ease;
}

/* Icon changes to green/accent on hover */
.ih-department-card:hover .ih-dept-icon {
    background: var(--accent-color, #10b981);
    color: #ffffff;
    transform: scale(1.05);
}

.ih-dept-info h4 {
    color: var(--ih-text-dark);
    font-size: 18px;
         font-weight: 600;
    margin: 0 0 5px 0;
    transition: 0.3s ease;
}

/* Title text changes to green/accent on hover */
.ih-department-card:hover .ih-dept-info h4 {
    color: var(--accent-color, #10b981);
}

.ih-dept-info p {
    color: var(--ih-text-muted);
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}


/* =========================================
   OPEN TICKET - DEPARTMENT SELECTION (CENTERED LAYOUT)
   ========================================= */
.ih-department-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Meken yata peliyata ena ewa lassanata center karanawa */
    gap: 25px;
    margin-top: 40px;
    max-width: 1050px; /* Loku screen wala unath hadaiyata width eka limit karanawa */
    margin-left: auto;
    margin-right: auto;
}

.ih-department-card {
    flex: 1 1 300px;
    max-width: 320px; /* Cards wala width eka samanawama thiyagannawa */
    background: #ffffff;
    border: 1px solid var(--ih-border);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(11, 42, 99, 0.02);
}

/* Hover Effect with Accent/Green Color (Kalin thibba kotasa ehemama thiye) */
.ih-department-card:hover {
    border-color: var(--accent-color, #10b981);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.12);
    transform: translateY(-3px);
}



/* =========================================
   SUBMIT TICKET FORM FIXES (STEP TWO)
   ========================================= */

/* Disable Bootstrap horizontal form squishing */
.ih-product-layout form .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
}

.ih-product-layout form [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Force vertical label & input stacking */
.ih-product-layout .ih-form-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 22px !important;
}

/* Form Label Styling */
.ih-product-layout .ih-form-label {
    width: 100% !important;
    text-align: left !important;
    font-size: 16px !important;
      font-weight: 600;
    color: var(--ih-text-dark) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}

/* Input Fields & Textarea Full Width */
.ih-product-layout .ih-form-control,
.ih-product-layout select.ih-form-control,
.ih-product-layout .md-editor {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-block !important;
}

/* Markdown Editor Box Full Width Fix */
.ih-product-layout .md-editor {
    border: 1px solid var(--ih-border) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.ih-product-layout .md-editor > textarea {
    width: 100% !important;
    background: #ffffff !important;
    padding: 15px !important;
    font-size: 14px !important;
}



/* =========================================
   SUBMIT TICKET (STEP TWO) ATTACHMENT & BUTTON FIXES
   ========================================= */

/* Attachment Box Heights & Alignment Fix */
.ih-product-layout .attachment-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 46px !important;
}

.ih-product-layout .attachment-group .custom-file {
    height: 46px !important;
    flex: 1 1 auto !important;
}

.ih-product-layout .attachment-group .custom-file-label {
    height: 46px !important;
    line-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 10px 0 0 10px !important;
    border: 1px solid #cbd5e1 !important;
    padding-left: 15px !important;
    font-size: 14px !important;
    color: var(--ih-text-muted) !important;
    background: #ffffff !important;
}

.ih-product-layout .attachment-group .custom-file-label::after {
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    background: #f1f5f9 !important;
    border-left: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    color: var(--ih-text-dark) !important;
      font-weight: 600;
    padding: 0 18px !important;
}

.ih-product-layout .attachment-group .input-group-append {
    height: 46px !important;
}

.ih-product-layout .attachment-group .input-group-append .btn {
    height: 46px !important;
    border-radius: 0 10px 10px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 20px !important;
      font-weight: 600;
    font-size: 14px !important;
    background: #edf4ff !important;
    color: var(--ih-primary) !important;
    border: 1px solid #bcdcff !important;
    border-left: none !important;
    transition: all 0.2s ease !important;
}

.ih-product-layout .attachment-group .input-group-append .btn:hover {
    background: var(--ih-primary) !important;
    color: #ffffff !important;
    border-color: var(--ih-primary) !important;
}

/* Submit / Cancel Action Buttons Styling */
.ih-submit-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-top: 35px !important;
}

.ih-submit-actions .ih-btn-submit {
    background: var(--accent-color, #10b981) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 32px !important;
    border-radius: 10px !important;
      font-weight: 600;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.ih-submit-actions .ih-btn-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35) !important;
}

.ih-submit-actions .ih-btn-cancel {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 12px 25px !important;
    border-radius: 10px !important;
      font-weight: 600;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.ih-submit-actions .ih-btn-cancel:hover {
    background: #e2e8f0 !important;
    color: var(--ih-text-dark) !important;
}



/* =========================================
   PREMIUM INVOICE PAGE STYLES & PRINT CSS
   ========================================= */

body.ih-invoice-body {
    background-color: #f8fafc !important;
    font-family: 'Poppins', sans-serif !important;
    color: #334155;
    padding: 40px 15px;
}

.ih-invoice-wrapper {
    max-width: 920px;
    margin: 0 auto;
}

.ih-invoice-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid var(--ih-border, #e2e8f0);
    box-shadow: 0 10px 40px rgba(11, 42, 99, 0.05);
    padding: 50px;
    position: relative;
}

/* Status Badges */
.ih-invoice-status-badge {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 50px;
         font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ih-invoice-status-badge.paid { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.ih-invoice-status-badge.unpaid { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.ih-invoice-status-badge.draft { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.ih-invoice-status-badge.refunded { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.ih-invoice-status-badge.cancelled { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }

/* Billing Addresses & Info Grid */
.ih-invoice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin: 35px 0;
    padding: 25px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #f1f5f9;
}

.ih-invoice-info-block h5 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
         font-weight: 600;
    margin-bottom: 8px;
}

.ih-invoice-info-block address, 
.ih-invoice-info-block div {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ih-text-dark, #0f172a);
    margin: 0;
}

/* Modern Line Items Table */
.ih-invoice-table {
    width: 100%;
    margin-top: 25px;
    border-collapse: separate;
    border-spacing: 0;
}

.ih-invoice-table th {
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
         font-weight: 600;
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.ih-invoice-table th:first-child { border-radius: 10px 0 0 10px; border-left: 1px solid #e2e8f0; }
.ih-invoice-table th:last-child { border-radius: 0 10px 10px 0; border-right: 1px solid #e2e8f0; }

.ih-invoice-table td {
    padding: 16px 20px;
    font-size: 14px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

/* Totals Box */
.ih-invoice-totals {
    width: 320px;
    margin-left: auto;
    margin-top: 20px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
}

.ih-invoice-totals-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: #64748b;
}

.ih-invoice-totals-row.grand-total {
    border-top: 2px dashed #cbd5e1;
    margin-top: 10px;
    padding-top: 12px;
    font-size: 18px;
         font-weight: 600;
    color: var(--ih-primary, #0b2a63);
}

/* Action Floating Bar */
.ih-invoice-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
}

/* Print Specific Rules (@media print) */
@media print {
    body.ih-invoice-body {
        background: #ffffff !important;
        padding: 0 !important;
    }
    .ih-invoice-card {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }
    .d-print-none, .ih-invoice-actions, .payment-btn-container {
        display: none !important;
    }
    .ih-invoice-grid {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
    }
}



/* =========================================
   STRIPE/VERCEL STYLE PREMIUM INVOICE CSS
   ========================================= */

body.ih-invoice-page {
    background-color: #f6f9fc !important;
    font-family: 'Poppins', sans-serif !important;
    color: #1a1f36;
    padding: 40px 15px;
    margin: 0;
}

.ih-invoice-container {
    max-width: 850px;
    margin: 0 auto;
}

.ih-invoice-card-modern {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e6ebf1;
    box-shadow: 0 15px 35px rgba(50, 50, 93, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03);
    padding: 50px;
    position: relative;
}

/* Header Section */
.ih-invoice-brand h2 {
    font-size: 26px;
         font-weight: 600;
    color: var(--ih-primary, #0b2a63);
    letter-spacing: -0.5px;
    margin: 0;
}

.ih-invoice-number-title {
    font-size: 15px;
         font-weight: 600;
    color: #697386;
    margin-top: 4px;
}

/* Status Badges */
.ih-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 50px;
         font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.ih-status-pill.paid { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.ih-status-pill.unpaid { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.ih-status-pill.draft { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.ih-status-pill.refunded { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.ih-status-pill.cancelled { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }

/* Metadata Grid (No Ugly Grey Box) */
.ih-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    padding: 30px 0;
    margin: 30px 0;
    border-top: 1px solid #e6ebf1;
    border-bottom: 1px solid #e6ebf1;
}

.ih-meta-item label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #8792a2 !important;
      font-weight: 600;
    display: block;
    margin-bottom: 8px !important;
}

.ih-meta-item div, .ih-meta-item address {
    font-size: 14px;
    line-height: 1.6;
    color: #3c4257;
    font-style: normal;
    margin: 0;
}

/* Premium Clean Table */
.ih-clean-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

.ih-clean-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8792a2;
         font-weight: 600;
    padding: 12px 0;
    border-bottom: 2px solid #e6ebf1;
    text-align: left;
}

.ih-clean-table td {
    padding: 18px 0;
    font-size: 14px;
    color: #3c4257;
    border-bottom: 1px solid #e6ebf1;
}

.ih-clean-table td.amount {
         font-weight: 600;
    color: #1a1f36;
    text-align: right;
}

/* Totals Area */
.ih-totals-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 25px;
}

.ih-totals-box {
    width: 100%;
    max-width: 340px;
}

.ih-totals-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #697386;
}

.ih-totals-row.grand-total {
    border-top: 2px solid #1a1f36;
    margin-top: 8px;
    padding-top: 14px;
    font-size: 18px;
         font-weight: 600;
    color: var(--ih-primary, #0b2a63);
}

/* Modern Action Bar */
.ih-invoice-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px dashed #e6ebf1;
}

.ih-btn-action-secondary {
    background: #ffffff !important;
    color: #4f566b !important;
    border: 1px solid #d8e2ed !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
      font-weight: 600;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.ih-btn-action-secondary:hover {
    background: #f8fafc !important;
    color: #1a1f36 !important;
    border-color: #cbd5e1 !important;
}

.ih-btn-action-primary {
    background: var(--ih-primary, #0b2a63) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
      font-weight: 600;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(11, 42, 99, 0.15) !important;
    transition: all 0.2s ease !important;
}

.ih-btn-action-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(11, 42, 99, 0.25) !important;
    color: #ffffff !important;
}

/* Print Specific Rules */
@media print {
    body.ih-invoice-page {
        background: #ffffff !important;
        padding: 0 !important;
    }
    .ih-invoice-card-modern {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }
    .d-print-none, .ih-invoice-footer-actions, .payment-btn-container {
        display: none !important;
    }
}




/* =========================================
   ENFORCED COLOR PRINT STYLES
   ========================================= */
@media print {
    @page {
        margin: 10mm;
        size: auto;
    }
    
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        
    }

    body.ih-invoice-body {
        background-color: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .ih-invoice-card {
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 25px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Preserve Header Background Colors in Print */
    .ih-section-header {
        background: #0b2a63 !important;
        color: #ffffff !important;
    }

    .ih-section-header.ledger-header {
        background: #0284c7 !important;
        color: #ffffff !important;
    }

    .ih-status-badge.paid {
        background: #dcfce7 !important;
        color: #15803d !important;
    }

    .ih-totals-row.grand-total {
        background: #edf4ff !important;
        color: #0b2a63 !important;
    }

    /* Hide Unnecessary Elements */
    .d-print-none, 
    .ih-action-bar, 
    .payment-btn-container {
        display: none !important;
    }
}


/* =========================================
   PREMIUM DOMAIN TRANSFER PAGE STYLES
   ========================================= */

/* Hide Default WHMCS Sidebar for a clean centered look */
#order-standard_cart .cart-sidebar { display: none !important; }
#order-standard_cart .cart-body { width: 100% !important; padding: 0 !important; }

.ih-transfer-wrapper {
    max-width: 650px;
    margin: 40px auto 60px auto;
    font-family: 'Poppins', sans-serif !important;
}

.ih-transfer-header {
    text-align: center;
    margin-bottom: 35px;
}

.ih-transfer-header h2 {
    font-size: 40px !important;
         font-weight: 600;
    color: var(--primary-color) !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.5px;
}

.ih-transfer-header p {
    font-size: 18px !important;
    color: #64748b !important;
    margin: 0 !important;
}

.ih-transfer-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 40px rgba(11, 42, 99, 0.06) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 40px !important;
    overflow: hidden;
}

.ih-form-group {
    margin-bottom: 25px;
    text-align: left;
}

.ih-form-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px !important;
      font-weight: 600;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #475569 !important;
    margin-bottom: 10px !important;
}

.ih-help-link {
    text-transform: none !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    color: var(--accent-color, #10b981) !important;
    text-decoration: none !important;
      font-weight: 600;
    transition: all 0.2s ease;
}

.ih-help-link:hover {
    color: #059669 !important;
    text-decoration: underline !important;
}

.ih-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* FIX FOR REPEATING ICONS BUG */
.ih-input-icon {
    position: absolute !important;
    left: 18px !important;
    color: #94a3b8 !important;
    font-size: 16px !important;
    pointer-events: none !important;
    transition: color 0.3s ease !important;
    
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

/* FIX FOR CENTERED TEXT & DESIGN */
.ih-form-control {
    width: 100% !important;
    padding: 15px 15px 15px 48px !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    background: #f8fafc !important;
    height: auto !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    text-align: left !important;
}

.ih-form-control:focus {
    background: #ffffff !important;
    border-color: var(--accent-color, #10b981) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
    outline: none !important;
}

.ih-form-control:focus + .ih-input-icon,
.ih-input-wrapper:focus-within .ih-input-icon {
    color: var(--accent-color, #10b981) !important;
}

.ih-btn-submit {
    background: var(--accent-color, #10b981) !important;
    color: #ffffff !important;
    width: 100% !important;
    padding: 16px !important;
    border-radius: 50px !important;
    font-size: 16px !important;
      font-weight: 600;
    border: none !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 10px !important;
    cursor: pointer !important;
}

.ih-btn-submit:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 25px rgba(16, 185, 129, 0.35) !important;
    background: #059669 !important;
}

.ih-disclaimer {
    text-align: center;
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin-top: 25px !important;
    font-weight: 500;
}

/* Captcha Styles Fix */
.ih-captcha-box {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.ih-captcha-box p {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 10px;
         font-weight: 600;
}



/* =========================================
   AUTH CODE HELP ICON (INSIDE INPUT)
   ========================================= */
   
.ih-help-link-inline {
    position: absolute !important;
    right: 18px !important;
    color: #94a3b8 !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.ih-help-link-inline:hover {
    color: var(--accent-color, #10b981) !important;
    transform: scale(1.1) !important;
}

/* Ensure text doesn't overlap the new right icon */
.ih-auth-input {
    padding-right: 50px !important;
}



/* =========================================================
   iHOSTER PRODUCT AREA - FINAL RESPONSIVE OVERRIDES
   Append only - existing desktop design remains unchanged
========================================================= */

@media (max-width: 1199.98px) {

    .ih-product-layout,
    .ih-product-layout * {
        box-sizing: border-box;
    }

    .ih-product-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .ih-product-layout img,
    .ih-product-layout svg,
    .ih-product-layout video {
        max-width: 100% !important;
        height: auto !important;
    }

    .ih-top-card,
    .ih-content-card,
    .ih-overview-grid,
    .ih-action-grid,
    .ih-ticket-header,
    .ih-reply-card,
    .ih-reply-form-card,
    .ih-transfer-wrapper,
    .ih-transfer-card {
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* -----------------------------------------------------
       TABS - HORIZONTAL SWIPE ON SMALLER SCREENS
    ----------------------------------------------------- */

    ul.ih-custom-tabs {
        width: 100% !important;
        max-width: 100% !important;

        flex-wrap: nowrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
    }

    ul.ih-custom-tabs::-webkit-scrollbar {
        display: none;
    }

    ul.ih-custom-tabs li.nav-item {
        flex: 0 0 auto !important;
    }


    /* -----------------------------------------------------
       TABLES
       Scroll horizontally instead of destroying columns
    ----------------------------------------------------- */

    .ih-content-card,
    .ih-invoice-card,
    .ih-invoice-card-modern {
        max-width: 100% !important;
    }

    .ih-clean-table,
    .ih-invoice-table {
        width: 100% !important;
        min-width: 680px !important;
        max-width: none !important;
    }

    /*
       These cards become the scroll containers.
       Only active on tablet/mobile.
    */
    .ih-content-card:has(.ih-clean-table),
    .ih-content-card:has(.ih-invoice-table),
    .ih-invoice-card:has(.ih-invoice-table),
    .ih-invoice-card-modern:has(.ih-clean-table),
    .ih-invoice-card-modern:has(.ih-invoice-table) {
        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;
    }

    .ih-clean-table th,
    .ih-clean-table td,
    .ih-invoice-table th,
    .ih-invoice-table td {
        white-space: nowrap !important;
    }


    /* -----------------------------------------------------
       INVOICE TOTALS
    ----------------------------------------------------- */

    .ih-invoice-totals,
    .ih-totals-box {
        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       FORMS
    ----------------------------------------------------- */

    .ih-form-wrapper,
    .ih-input-wrap,
    .ih-input-wrapper,
    .ih-form-control,
    .ih-product-layout input,
    .ih-product-layout select,
    .ih-product-layout textarea {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}


/* =========================================================
   TABLET / iPAD
   991px AND BELOW
========================================================= */

@media (max-width: 991.98px) {

    /* -----------------------------------------------------
       PRODUCT DETAILS TOP CARD
       Important: fixes 820px iPad width
    ----------------------------------------------------- */

    .ih-top-card {
        flex-direction: column !important;
    }

    .ih-card-left,
    .ih-card-right {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ih-card-left {
        border-right: none !important;
        border-bottom: 1px solid var(--ih-border) !important;

        padding: 28px 20px !important;
    }

    .ih-card-right {
        padding: 28px !important;
    }

    .ih-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 20px !important;
    }


    /* -----------------------------------------------------
       CONTENT CARD
    ----------------------------------------------------- */

    .ih-content-card {
        padding: 28px !important;
    }


    /* -----------------------------------------------------
       OVERVIEW GRID
    ----------------------------------------------------- */

    .ih-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 20px !important;

        padding: 24px !important;
    }


    /* -----------------------------------------------------
       ACTION BUTTON GRID
    ----------------------------------------------------- */

    .ih-action-grid {
        width: 100% !important;
    }

    .ih-action-box {
        flex: 1 1 calc(50% - 15px) !important;

        min-width: 0 !important;
        max-width: none !important;
    }


    /* -----------------------------------------------------
       TICKET
    ----------------------------------------------------- */

    .ih-ticket-header {
        align-items: flex-start !important;
    }

    .ih-ticket-actions {
        flex-wrap: wrap !important;
    }

    .ih-ticket-title,
    .ih-ticket-subject {
        max-width: 100% !important;

        overflow-wrap: anywhere !important;
    }


    /* -----------------------------------------------------
       INVOICE HEADER / INFO
    ----------------------------------------------------- */

    .ih-invoice-card,
    .ih-invoice-card-modern {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ih-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }


    /* -----------------------------------------------------
       TRANSFER
    ----------------------------------------------------- */

    .ih-transfer-wrapper {
        width: calc(100% - 30px) !important;
        max-width: 650px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================================================
   MOBILE
   767px AND BELOW
========================================================= */

@media (max-width: 767.98px) {

    /* -----------------------------------------------------
       TOP PRODUCT CARD
    ----------------------------------------------------- */

    .ih-card-left {
        padding: 24px 18px !important;
    }

    .ih-card-right {
        padding: 24px 18px !important;
    }

    .ih-info-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }


    /* -----------------------------------------------------
       CONTENT CARD
    ----------------------------------------------------- */

    .ih-content-card {
        padding: 22px 18px !important;
        border-radius: 14px !important;
    }


    /* -----------------------------------------------------
       DETAIL ROW
    ----------------------------------------------------- */

    .ih-data-row {
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 7px !important;
    }

    .ih-data-label,
    .ih-data-value {
        width: 100% !important;
    }

    .ih-data-value {
        overflow-wrap: anywhere !important;
    }


    /* -----------------------------------------------------
       CUSTOM TABS
    ----------------------------------------------------- */

    ul.ih-custom-tabs {
        gap: 5px !important;

        margin-bottom: 20px !important;
    }

    ul.ih-custom-tabs a.nav-link {
        padding: 10px 12px !important;

        font-size: 13px !important;
    }


    /* -----------------------------------------------------
       FORM
    ----------------------------------------------------- */

    .ih-form-group {
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 8px !important;
    }

    .ih-form-label {
        width: 100% !important;
    }

    .ih-input-wrap,
    .ih-input-wrapper {
        width: 100% !important;
    }


    /* -----------------------------------------------------
       RADIO OPTIONS
    ----------------------------------------------------- */

    .ih-radio-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 14px !important;

        padding: 15px !important;
    }


    /* -----------------------------------------------------
       DOMAIN PILLS
    ----------------------------------------------------- */

    .ih-domain-pill-container {
        width: 100% !important;

        padding: 14px !important;
    }

    .ih-domain-pill {
        max-width: 100% !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }


    /* -----------------------------------------------------
       OVERVIEW
    ----------------------------------------------------- */

    .ih-overview-grid {
        grid-template-columns: 1fr !important;

        gap: 18px !important;

        padding: 20px 18px !important;
    }


    /* -----------------------------------------------------
       ACTION TILES
    ----------------------------------------------------- */

    .ih-action-grid {
        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 10px !important;
    }

    .ih-action-box {
        width: 100% !important;

        min-width: 0 !important;
        max-width: 100% !important;

        padding: 14px 10px !important;
    }


    /* -----------------------------------------------------
       ADDONS
    ----------------------------------------------------- */

    .ih-addon-row {
        flex-direction: column !important;
        align-items: center !important;

        text-align: center !important;
    }

    .ih-addon-content {
        width: 100% !important;
    }

    .ih-addon-actions {
        width: 100% !important;
    }

    .ih-addon-actions form {
        width: 100% !important;
    }


    /* -----------------------------------------------------
       ACTION BAR
    ----------------------------------------------------- */

    .ih-action-bar,
    .ih-invoice-actions,
    .ih-invoice-footer-actions {
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 12px !important;
    }

    .ih-action-bar > *,
    .ih-invoice-actions > *,
    .ih-invoice-footer-actions > * {
        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       TICKET
    ----------------------------------------------------- */

    .ih-ticket-header {
        flex-direction: column !important;
    }

    .ih-ticket-actions {
        width: 100% !important;

        flex-direction: column !important;
    }

    .ih-ticket-actions > * {
        width: 100% !important;
    }

    .ih-reply-header {
        padding: 14px 16px !important;
    }

    .ih-reply-body {
        padding: 18px 16px !important;

        overflow-wrap: anywhere !important;
    }

    .ih-reply-footer {
        padding: 14px 16px !important;
    }

    .ih-reply-form-card {
        padding: 22px 18px !important;
    }

    .ih-attachment-item {
        max-width: 100% !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }


    /* -----------------------------------------------------
       ATTACHMENT FIELD
    ----------------------------------------------------- */

    .ih-product-layout .attachment-group,
    .ih-reply-form-card .attachment-group {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       INVOICE
    ----------------------------------------------------- */

    body.ih-invoice-page {
        padding: 20px 10px !important;
    }

    .ih-invoice-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ih-invoice-card-modern,
    .ih-invoice-card {
        width: 100% !important;
        max-width: 100% !important;

        padding: 25px 18px !important;
    }

    .ih-meta-grid {
        grid-template-columns: 1fr !important;

        gap: 18px !important;

        padding: 20px 0 !important;
    }

    .ih-invoice-totals,
    .ih-totals-box {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
    }


    /* -----------------------------------------------------
       TABLE WIDTH FOR MOBILE SCROLL
    ----------------------------------------------------- */

    .ih-clean-table,
    .ih-invoice-table {
        min-width: 620px !important;
    }


    /* -----------------------------------------------------
       TRANSFER PAGE
    ----------------------------------------------------- */

    .ih-transfer-wrapper {
        width: calc(100% - 20px) !important;

        margin-top: 20px !important;
        margin-bottom: 40px !important;
    }

    .ih-transfer-card {
        padding: 25px 18px !important;

        border-radius: 16px !important;
    }

    .ih-transfer-header {
        margin-bottom: 24px !important;
    }

    .ih-transfer-header h2 {
        font-size: clamp(28px, 8vw, 36px) !important;
    }

    .ih-transfer-header p {
        font-size: 15px !important;
    }

    .ih-btn-submit {
        max-width: 100% !important;
    }
}


/* =========================================================
   SMALL MOBILE
   575px AND BELOW
========================================================= */

@media (max-width: 575.98px) {

    /* Action tiles single column */
    .ih-action-grid {
        grid-template-columns: 1fr !important;
    }

    .ih-action-box {
        width: 100% !important;
    }


    /* Page title */
    .ih-page-title {
        align-items: flex-start !important;

        font-size: 18px !important;

        overflow-wrap: anywhere !important;
    }


    /* Ticket title */
    .ih-ticket-title {
        font-size: 18px !important;

        align-items: flex-start !important;
    }


    /* Tables stay readable and swipe horizontally */
    .ih-clean-table,
    .ih-invoice-table {
        min-width: 580px !important;
    }


    /* Buttons */
    .ih-btn-green,
    .ih-btn-solid,
    .ih-btn-submit,
    .ih-btn-action-primary,
    .ih-btn-action-secondary {
        max-width: 100% !important;
    }


    /* Captcha */
    .ih-captcha-box img {
        max-width: 100% !important;
        height: auto !important;
    }
}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .ih-card-left,
    .ih-card-right,
    .ih-content-card,
    .ih-reply-form-card {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .ih-clean-table,
    .ih-invoice-table {
        min-width: 540px !important;
    }
}



/* =========================================================
   SECURITY PAGE - 2FA BUTTON RESPONSIVE FIX
   ========================================================= */

/* 2FA action wrapper */
.am-card > .mt-3 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 12px !important;
}


/* Visible 2FA button */
.am-card > .mt-3 .am-btn.twofa-config-link:not(.w-hidden) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 12px 22px !important;

    font-size: 15px !important;
      font-weight: 600;
    line-height: 1.3 !important;

    text-align: center !important;
    white-space: normal !important;

    box-sizing: border-box !important;
}


/* WHMCS hidden state */
.am-card > .mt-3 .twofa-config-link.w-hidden {
    display: none !important;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

    .am-card > .mt-3 {
        width: 100% !important;
        align-items: stretch !important;
    }

    .am-card > .mt-3 .am-btn.twofa-config-link:not(.w-hidden) {
        width: 100% !important;
        max-width: 100% !important;

        padding: 12px 18px !important;

        justify-content: center !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .am-card > .mt-3 .am-btn.twofa-config-link:not(.w-hidden) {
        width: 100% !important;

        font-size: 14px !important;
        padding: 12px 14px !important;

        border-radius: 10px !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .am-card > .mt-3 .am-btn.twofa-config-link:not(.w-hidden) {
        font-size: 13px !important;
        padding: 11px 10px !important;

        overflow-wrap: anywhere !important;
    }
}



/* =====================================================================
   iHOSTER DOMAIN REGISTER PAGE
   FINAL RESPONSIVE OVERRIDES
   Desktop / Laptop / iPad / Tablet / Mobile / Small Mobile
   ===================================================================== */


/* =========================================================
   0. GLOBAL SAFETY - DOMAIN PAGE ONLY
   ========================================================= */

#hostpapa-domain-wrapper,
#hostpapa-domain-wrapper * {
    box-sizing: border-box !important;
}

#hostpapa-domain-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    overflow-x: hidden !important;
}

#hostpapa-domain-wrapper .hp-inner-container {
    width: 100% !important;
    max-width: 1500px !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 20px !important;
    padding-right: 20px !important;
}

#hostpapa-domain-wrapper img,
#hostpapa-domain-wrapper svg,
#hostpapa-domain-wrapper video {
    max-width: 100% !important;
    height: auto !important;
}


/* Prevent Bootstrap rows creating horizontal overflow */
#hostpapa-domain-wrapper .hp-tld-pricing-section > .row,
#hostpapa-domain-wrapper .hp-promo-cards-section > .row,
#hostpapa-domain-wrapper .hp-promo-cards-section .row {
    max-width: 100% !important;
}


/* =========================================================
   1. HERO - SAFE WIDTH
   ========================================================= */

#hostpapa-domain-wrapper .hp-domain-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}

#hostpapa-domain-wrapper .hp-hero-title,
#hostpapa-domain-wrapper .hp-hero-subtitle {
    max-width: 100% !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
}

#hostpapa-domain-wrapper .hp-search-box-container {
    width: 100% !important;
    max-width: 780px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    min-width: 0 !important;
    box-sizing: border-box !important;
}

#hostpapa-domain-wrapper .hp-search-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;


    position: relative; 
    transform: translateY(50%); 
    z-index: 10; 
}

#hostpapa-domain-wrapper .hp-search-input {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* =========================================================
   2. RESULTS / SUGGESTIONS / SPOTLIGHT
   ========================================================= */

#hostpapa-domain-wrapper .hp-results-container,
#hostpapa-domain-wrapper .hp-featured-domain-card,
#hostpapa-domain-wrapper .hp-more-options-section,
#hostpapa-domain-wrapper .hp-suggestions-wrapper,
#hostpapa-domain-wrapper .hp-spotlight-list-wrapper,
#hostpapa-domain-wrapper .hp-spotlight-list-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#hostpapa-domain-wrapper .hp-card-content,
#hostpapa-domain-wrapper .hp-domain-info-left,
#hostpapa-domain-wrapper .hp-domain-price-right,
#hostpapa-domain-wrapper .hp-spotlight-actions,
#hostpapa-domain-wrapper .hp-sug-actions {
    min-width: 0 !important;
}

#hostpapa-domain-wrapper .hp-domain-name-display,
#hostpapa-domain-wrapper .hp-sug-domain {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}


/* =========================================================
   3. TLD PRICING AREA - BASE FIX
   ========================================================= */

#hostpapa-domain-wrapper .hp-tld-pricing-section {
    width: 100% !important;
    max-width: 950px !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

#hostpapa-domain-wrapper .hp-tld-table-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow: hidden !important;
}


/* Remove negative Bootstrap row width problems */
#hostpapa-domain-wrapper .hp-tld-table-card .row {
    max-width: 110% !important;
}


/* Price should not break character-by-character */
#hostpapa-domain-wrapper .tld-row .font-bold {
    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* =========================================================
   4. PROMO CARDS - BASE FIX
   ========================================================= */

#hostpapa-domain-wrapper .hp-promo-cards-section {
    width: 100% !important;
    max-width: 950px !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

#hostpapa-domain-wrapper .hp-promo-cards-section .max-w-500 {
    min-width: 0 !important;
}

#hostpapa-domain-wrapper .hp-promo-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
}

#hostpapa-domain-wrapper .hp-promo-content {
    min-width: 0 !important;
}

#hostpapa-domain-wrapper .hp-promo-sub {
    max-width: 100% !important;
}


/* =====================================================================
   TABLET / iPAD
   992px AND BELOW
   ===================================================================== */

@media (max-width: 991.98px) {

    /* -------------------------
       Main page
       ------------------------- */

    #hostpapa-domain-wrapper {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #hostpapa-domain-wrapper .hp-inner-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* -------------------------
       Hero
       ------------------------- */

    #hostpapa-domain-wrapper .hp-domain-hero {
        width: 100% !important;

        padding: 50px 28px 35px !important;

        border-radius: 20px !important;

        overflow: hidden !important;
    }

    #hostpapa-domain-wrapper .hp-hero-title {
        font-size: clamp(32px, 5vw, 38px) !important;
        line-height: 1.15 !important;

        margin-bottom: 14px !important;
    }

    #hostpapa-domain-wrapper .hp-hero-subtitle {
        max-width: 650px !important;

        font-size: 20px !important;
        line-height: 1.6 !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* IMPORTANT:
       Remove desktop negative overlap margin on iPad/mobile */

    #hostpapa-domain-wrapper .hp-search-box-container {
        width: 100% !important;
        max-width: 760px !important;

        margin: 28px auto 0 !important;

        position: relative !important;
        left: auto !important;
        right: auto !important;

        transform: none !important;
    }

    #hostpapa-domain-wrapper .hp-search-group {
        width: 100% !important;

        margin: 0 !important;
    }


    /* helper text stays inside hero */
    #hostpapa-domain-wrapper
    .hp-search-box-container form > .text-center.mt-3 {
        color: rgba(255, 255, 255, 0.78) !important;

        line-height: 1.45 !important;

        margin-bottom: 0 !important;
    }


    /* -------------------------
       Pricing section
       ------------------------- */

    #hostpapa-domain-wrapper .hp-tld-pricing-section {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 50px !important;
    }

    #hostpapa-domain-wrapper .hp-tld-table-card {
        width: 100% !important;
        max-width: 100% !important;

        overflow: hidden !important;
    }

    #hostpapa-domain-wrapper .tld-pricing-header,
    #hostpapa-domain-wrapper .tld-row {
        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #hostpapa-domain-wrapper .tld-pricing-header > *,
    #hostpapa-domain-wrapper .tld-row > * {
        min-width: 0 !important;
    }

    #hostpapa-domain-wrapper .tld-row .font-bold {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }


    /* -------------------------
       Promo cards
       ------------------------- */

    #hostpapa-domain-wrapper .hp-promo-cards-section {
        width: 100% !important;
        max-width: 100% !important;
    }

    #hostpapa-domain-wrapper .hp-promo-cards-section > .row {
        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #hostpapa-domain-wrapper .hp-promo-cards-section .max-w-500 {
        max-width: none !important;
    }

    #hostpapa-domain-wrapper .hp-promo-card {
        padding: 28px 24px !important;
    }

}


/* =====================================================================
   MOBILE
   767px AND BELOW
   ===================================================================== */

@media (max-width: 767.98px) {

    #hostpapa-domain-wrapper {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 60px !important;
    }


    /* =====================================================
       HERO
       ===================================================== */

    #hostpapa-domain-wrapper .hp-domain-hero {
        padding: 40px 20px 28px !important;

        border-radius: 18px !important;

        margin-top: 10px !important;
    }

    #hostpapa-domain-wrapper .hp-hero-title {
        font-size: 50px !important;
        line-height: 1.12 !important;

        margin-bottom: 15px !important;
    }

    #hostpapa-domain-wrapper .hp-hero-subtitle {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    #hostpapa-domain-wrapper .hp-search-box-container {
        width: 100% !important;

        margin: 24px auto 0 !important;
    }

    #hostpapa-domain-wrapper .hp-search-group {
        width: 100% !important;
    }


    /* =====================================================
       SECTION TITLES
       ===================================================== */

    #hostpapa-domain-wrapper .hp-section-title {
        font-size: 21px !important;
        line-height: 1.3 !important;

        padding-left: 5px !important;
        padding-right: 5px !important;
    }


    /* =====================================================
       CATEGORY BUTTONS
       ===================================================== */

    #hostpapa-domain-wrapper .tld-filters {
        width: 100% !important;

        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;

        gap: 8px !important;
    }

    #hostpapa-domain-wrapper .tld-filters .hp-tld-badge {
        max-width: 100% !important;

        padding: 7px 15px !important;

        font-size: 12px !important;
    }


    /* =====================================================
       MOBILE TLD TABLE -> RESPONSIVE CARDS
       ===================================================== */

    #hostpapa-domain-wrapper .hp-tld-table-card {
        background: transparent !important;

        border: none !important;
        box-shadow: none !important;

        overflow: visible !important;
    }


    /* Desktop header no longer useful on phone */
    #hostpapa-domain-wrapper .tld-pricing-header {
        display: none !important;
    }


    /* Each TLD becomes its own card */
    #hostpapa-domain-wrapper .tld-row {
        display: block !important;

        width: 100% !important;

        margin: 0 0 12px 0 !important;
        padding: 0 !important;

        background: #ffffff !important;

        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;

        overflow: hidden !important;

        box-shadow: 0 5px 16px rgba(11, 42, 99, 0.05) !important;
    }


    /* Domain (.com / .net etc.) */
    #hostpapa-domain-wrapper .tld-row > .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;

        padding: 14px 15px 12px !important;

        background: #f8fafc !important;

        border-bottom: 1px solid #e2e8f0 !important;

        text-align: left !important;
    }

    #hostpapa-domain-wrapper .tld-row .two-row-center strong {
        font-size: 16px !important;

        padding: 5px 12px !important;
    }


    /* Price area */
    #hostpapa-domain-wrapper .tld-row > .col-md-8 {
        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;

        padding: 0 !important;
    }


    #hostpapa-domain-wrapper .tld-row > .col-md-8 > .row {
        display: grid !important;

        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        width: 100% !important;

        margin: 0 !important;
    }


    /* Register / Transfer / Renewal */
    #hostpapa-domain-wrapper
    .tld-row > .col-md-8 > .row > .col-4 {
        width: 100% !important;
        max-width: none !important;

        flex: none !important;

        min-width: 0 !important;

        padding: 12px 6px 13px !important;

        text-align: center !important;

        border-left: 1px solid #eef2f7 !important;
    }

    #hostpapa-domain-wrapper
    .tld-row > .col-md-8 > .row > .col-4:first-child {
        border-left: none !important;
    }


    /* Mobile labels */
    #hostpapa-domain-wrapper
    .tld-row > .col-md-8 > .row > .col-4::before {
        display: block !important;

        margin-bottom: 6px !important;

        color: #64748b !important;

        font-size: 9px !important;
          font-weight: 600;
        line-height: 1.2 !important;

        letter-spacing: 0.4px !important;

        text-transform: uppercase !important;
    }

    #hostpapa-domain-wrapper
    .tld-row > .col-md-8 > .row > .col-4:nth-child(1)::before {
        content: "New Price";
    }

    #hostpapa-domain-wrapper
    .tld-row > .col-md-8 > .row > .col-4:nth-child(2)::before {
        content: "Transfer";
    }

    #hostpapa-domain-wrapper
    .tld-row > .col-md-8 > .row > .col-4:nth-child(3)::before {
        content: "Renewal";
    }


    #hostpapa-domain-wrapper .tld-row .font-bold {
        display: inline-block !important;

        max-width: 100% !important;

        font-size: 13px !important;
        line-height: 1.3 !important;

        white-space: normal !important;
        word-break: normal !important;
    }

    #hostpapa-domain-wrapper .tld-row small.text-muted {
        display: block !important;

        margin-top: 4px !important;

        font-size: 10px !important;
    }


    /* =====================================================
       PROMO CARDS
       ===================================================== */

    #hostpapa-domain-wrapper .hp-promo-cards-section {
        margin-top: 40px !important;
    }

    #hostpapa-domain-wrapper .hp-promo-cards-section > .row {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 18px !important;

        width: 100% !important;

        margin: 0 !important;
    }

    #hostpapa-domain-wrapper .hp-promo-cards-section .max-w-500 {
        width: 100% !important;
        max-width: 100% !important;

        padding: 0 !important;
    }

    #hostpapa-domain-wrapper .hp-promo-card {
        width: 100% !important;

        padding: 26px 22px !important;

        min-height: 0 !important;
    }

    #hostpapa-domain-wrapper .hp-promo-sub {
        font-size: 14px !important;
    }


    /* =====================================================
       FEATURED RESULT
       ===================================================== */

    #hostpapa-domain-wrapper .hp-featured-domain-card {
        width: 100% !important;

        padding: 24px 18px !important;
    }

    #hostpapa-domain-wrapper .hp-card-content {
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 18px !important;
    }

    #hostpapa-domain-wrapper .hp-domain-price-right {
        width: 100% !important;

        display: flex !important;
        flex-wrap: wrap !important;

        justify-content: space-between !important;

        gap: 12px !important;
    }


    /* =====================================================
       SPOTLIGHT / SUGGESTIONS
       ===================================================== */

    #hostpapa-domain-wrapper .hp-spotlight-list-item {
        padding: 16px !important;
    }

    #hostpapa-domain-wrapper
    .hp-spotlight-list-item .spotlight-tld-row,
    #hostpapa-domain-wrapper .hp-suggestion-item {
        width: 100% !important;

        flex-wrap: wrap !important;

        gap: 12px !important;
    }

}


/* =====================================================================
   PHONE
   575px AND BELOW
   ===================================================================== */

@media (max-width: 575.98px) {

    /* =====================================================
       HERO SEARCH STACK
       ===================================================== */

    #hostpapa-domain-wrapper .hp-domain-hero {
        padding: 34px 16px 24px !important;

        border-radius: 16px !important;
    }

    #hostpapa-domain-wrapper .hp-hero-title {
        font-size: clamp(28px, 9vw, 34px) !important;
    }

    #hostpapa-domain-wrapper .hp-hero-subtitle {
        font-size: 13.5px !important;
    }


    #hostpapa-domain-wrapper .hp-search-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;

        padding: 6px !important;

        gap: 6px !important;

        border-radius: 16px !important;
    }

    #hostpapa-domain-wrapper .hp-search-icon {
        display: none !important;
    }

    #hostpapa-domain-wrapper .hp-search-input {
        display: block !important;

        width: 100% !important;

        flex: 0 0 auto !important;

        padding: 12px 14px !important;

        font-size: 14px !important;

        text-align: left !important;
    }

    #hostpapa-domain-wrapper .hp-btn-search {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        flex: 0 0 auto !important;

        margin: 0 !important;

        padding: 12px 15px !important;

        border-radius: 11px !important;
    }


    /* helper */
    #hostpapa-domain-wrapper
    .hp-search-box-container form > .text-center.mt-3 {
        padding: 0 6px !important;

        font-size: 12px !important;
        line-height: 1.5 !important;
    }


    /* =====================================================
       PROMO
       ===================================================== */

    #hostpapa-domain-wrapper .hp-promo-card {
        flex-direction: column !important;
        align-items: flex-start !important;

        padding: 24px 20px !important;

        gap: 18px !important;
    }

    #hostpapa-domain-wrapper .hp-promo-icon-box {
        width: 54px !important;
        height: 54px !important;
    }

    #hostpapa-domain-wrapper .hp-promo-icon-box i {
        font-size: 23px !important;
    }

    #hostpapa-domain-wrapper .hp-promo-btn-primary,
    #hostpapa-domain-wrapper .hp-promo-btn-dark {
        max-width: 100% !important;

        padding: 10px 18px !important;

        white-space: normal !important;
    }


    /* =====================================================
       SPOTLIGHT RESULTS
       ===================================================== */

    #hostpapa-domain-wrapper
    .hp-spotlight-list-item .spotlight-tld-row,
    #hostpapa-domain-wrapper .hp-suggestion-item {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #hostpapa-domain-wrapper .hp-spotlight-domain,
    #hostpapa-domain-wrapper .hp-sug-domain,
    #hostpapa-domain-wrapper .hp-spotlight-actions,
    #hostpapa-domain-wrapper .hp-sug-actions {
        width: 100% !important;
        max-width: 100% !important;
    }

    #hostpapa-domain-wrapper .hp-spotlight-actions,
    #hostpapa-domain-wrapper .hp-sug-actions {
        display: flex !important;
        flex-wrap: wrap !important;

        gap: 10px !important;
    }

}


/* =====================================================================
   EXTRA SMALL PHONE
   380px AND BELOW
   ===================================================================== */

@media (max-width: 380px) {

    #hostpapa-domain-wrapper {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #hostpapa-domain-wrapper .hp-domain-hero {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    #hostpapa-domain-wrapper .hp-hero-title {
        font-size: 28px !important;
    }


    /* Slightly smaller TLD pricing for 360/367px */
    #hostpapa-domain-wrapper
    .tld-row > .col-md-8 > .row > .col-4 {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    #hostpapa-domain-wrapper .tld-row .font-bold {
        font-size: 12px !important;
    }

    #hostpapa-domain-wrapper
    .tld-row > .col-md-8 > .row > .col-4::before {
        font-size: 8px !important;
    }

    #hostpapa-domain-wrapper .tld-row small.text-muted {
        font-size: 9px !important;
    }

}


/* =====================================================================
   UPSELL DRAWER MOBILE SAFETY
   ===================================================================== */

@media (max-width: 575.98px) {

    #hostpapa-domain-wrapper .hp-drawer-body {
        width: 100% !important;
        max-width: 100% !important;

        padding: 25px 18px !important;
    }

    #hostpapa-domain-wrapper .hp-drawer-tabs {
        width: 100% !important;

        display: flex !important;
        flex-wrap: nowrap !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;

        gap: 8px !important;
    }

    #hostpapa-domain-wrapper .hp-tab-btn {
        flex: 0 0 auto !important;
    }

    #hostpapa-domain-wrapper .hp-upsell-grid {
        grid-template-columns: 1fr !important;
    }

}


/* =====================================================================
   iHOSTER INVOICE PAGE
   FINAL RESPONSIVE FIX
   Desktop / Tablet / Mobile / Extra Small
   ===================================================================== */


/* =========================================================
   GLOBAL SCREEN SAFETY
   ========================================================= */

@media screen {

    body.ih-invoice-body,
    body.ih-invoice-body * {
        box-sizing: border-box !important;
    }

    body.ih-invoice-body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .ih-invoice-card {
        width: 100% !important;
        max-width: 850px !important;
        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        overflow: hidden !important;
    }

    .ih-invoice-card img,
    .ih-invoice-card svg {
        max-width: 100% !important;
        height: auto !important;
    }


    /* Prevent long text from forcing page width */
    .ih-grid-item,
    .ih-grid-item address,
    .ih-grid-item div,
    .ih-table th,
    .ih-table td {
        min-width: 0 !important;
    }

    .ih-grid-item address,
    .ih-table td {
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }


    /* Payment gateway select */
    .ih-grid-item select.form-control {
        max-width: 100% !important;
    }


    /* DirectPay / payment gateway block */
    .payment-btn-container {
        max-width: 100% !important;
    }

    .payment-btn-container img {
        max-width: 100% !important;
        height: auto !important;
    }

}


/* =====================================================================
   TABLET / iPAD
   991px AND BELOW
   ===================================================================== */

@media screen and (max-width: 991.98px) {

    body.ih-invoice-body {
        padding: 28px 16px !important;
    }

    .ih-invoice-card {
        width: 100% !important;
        max-width: 100% !important;

        padding: 34px !important;
    }


    /* Details box still 2 columns on normal tablets */
    .ih-grid-box {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 22px !important;

        padding: 22px !important;
    }


    /* Gateway cannot escape its grid cell */
    .ih-grid-item form,
    .ih-grid-item select.form-control {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* Invoice item table */
    .ih-section-card .ih-table {
        width: 100% !important;
        max-width: 100% !important;
    }

}


/* =====================================================================
   MOBILE
   767px AND BELOW
   ===================================================================== */

@media screen and (max-width: 767.98px) {

    body.ih-invoice-body {
        padding: 20px 12px !important;
    }

    .ih-invoice-card {
        width: 100% !important;
        max-width: 100% !important;

        padding: 26px 20px !important;

        border-radius: 15px !important;
    }


    /* =====================================================
       TOP INVOICE HEADER
       Logo / Invoice No / Status / Due Date / Payment
       ===================================================== */

    .ih-invoice-card >
    .d-flex.justify-content-between.align-items-start.flex-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        width: 100% !important;

        gap: 18px !important;
    }


    /* Right status area becomes full width */
    .ih-invoice-card >
    .d-flex.justify-content-between.align-items-start.flex-wrap >
    .text-right {
        width: 100% !important;

        text-align: left !important;
    }


    .ih-status-badge {
        padding: 6px 16px !important;

        font-size: 12px !important;
    }


    /* Due date */
    .ih-invoice-card >
    .d-flex.justify-content-between.align-items-start.flex-wrap >
    .text-right .mt-2 {
        text-align: left !important;
    }


    /* Payment gateway output */
    .payment-btn-container {
        width: 100% !important;

        text-align: left !important;

        overflow: hidden !important;
    }

    .payment-btn-container form,
    .payment-btn-container > div {
        max-width: 100% !important;
    }


    /* =====================================================
       ADDRESS / DETAILS BOX
       ===================================================== */

    .ih-grid-box {
        display: grid !important;

        grid-template-columns: 1fr !important;

        width: 100% !important;

        gap: 20px !important;

        margin: 24px 0 !important;
        padding: 20px !important;
    }


    .ih-grid-item {
        width: 100% !important;
        max-width: 100% !important;
    }


    .ih-grid-item.mt-2 {
        margin-top: 0 !important;
    }


    .ih-grid-item address {
        width: 100% !important;

        font-size: 13px !important;
        line-height: 1.65 !important;
    }


    /* Payment Method */
    .ih-grid-item form {
        display: block !important;

        width: 100% !important;
    }

    .ih-grid-item select.form-control,
    .ih-grid-item .form-control.w-auto {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
    }


    /* =====================================================
       INVOICE ITEMS
       ===================================================== */

    .ih-section-card {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 24px !important;
    }

    .ih-section-header {
        padding: 12px 15px !important;

        font-size: 13px !important;
    }


    /* Normal Invoice Items table */
    .ih-section-header:not(.ledger-header) + .ih-table {
        width: 100% !important;

        table-layout: fixed !important;
    }


    .ih-section-header:not(.ledger-header) + .ih-table th:first-child,
    .ih-section-header:not(.ledger-header) + .ih-table td:first-child {
        width: 68% !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }


    .ih-section-header:not(.ledger-header) + .ih-table th:last-child,
    .ih-section-header:not(.ledger-header) + .ih-table td:last-child {
        width: 32% !important;

        text-align: right !important;

        white-space: normal !important;
    }


    .ih-table th {
        padding: 11px 12px !important;

        font-size: 10px !important;
    }

    .ih-table td {
        padding: 12px !important;

        font-size: 12px !important;
        line-height: 1.5 !important;
    }


    /* =====================================================
       TOTALS
       ===================================================== */

    .ih-totals-row {
        width: 100% !important;

        justify-content: space-between !important;

        gap: 16px !important;

        padding: 9px 14px !important;
    }


    .ih-totals-row span:first-child {
        margin-right: 0 !important;

        flex: 1 1 auto !important;
    }


    .ih-totals-row span:last-child {
        flex: 0 0 auto !important;

        text-align: right !important;

        overflow-wrap: normal !important;
    }


    .ih-totals-row.grand-total {
        padding: 12px 14px !important;

        font-size: 15px !important;
    }


    /* =====================================================
       LEDGER TABLE
       Keep table readable with its OWN scroll,
       not whole page horizontal scroll
       ===================================================== */

    .ih-section-header.ledger-header + .ih-table {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: thin;
    }


    .ih-section-header.ledger-header + .ih-table thead,
    .ih-section-header.ledger-header + .ih-table tbody {
        min-width: 560px !important;
    }


    .ih-section-header.ledger-header + .ih-table tr {
        display: table !important;

        width: 560px !important;

        table-layout: fixed !important;
    }


    .ih-section-header.ledger-header + .ih-table th,
    .ih-section-header.ledger-header + .ih-table td {
        white-space: nowrap !important;

        overflow-wrap: normal !important;

        padding: 11px 12px !important;
    }


    /* =====================================================
       BOTTOM ACTION BUTTONS
       ===================================================== */

    .ih-action-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;

        gap: 10px !important;

        margin-top: 28px !important;
        padding-top: 18px !important;
    }


    /* Back button */
    .ih-action-bar > .ih-btn {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;

        justify-content: center !important;

        text-align: center !important;

        white-space: normal !important;

        margin: 0 !important;
    }


    /* Print + Download wrapper */
    .ih-action-bar > .d-flex {
        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;

        gap: 10px !important;
    }


    .ih-action-bar > .d-flex .ih-btn {
        display: flex !important;

        width: 100% !important;
        min-width: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;

        padding: 11px 10px !important;

        text-align: center !important;

        white-space: normal !important;
    }

}


/* =====================================================================
   SMALL MOBILE
   575px AND BELOW
   ===================================================================== */

@media screen and (max-width: 575.98px) {

    body.ih-invoice-body {
        padding: 14px 10px !important;
    }


    .ih-invoice-card {
        padding: 24px 16px !important;

        border-radius: 14px !important;
    }


    /* Company / invoice title */
    .ih-invoice-card h2 {
        font-size: 23px !important;
    }

    .ih-invoice-card h3 {
        font-size: 16px !important;
    }


    /* Details */
    .ih-grid-box {
        padding: 17px !important;

        gap: 18px !important;
    }


    /* Section cards */
    .ih-section-card {
        border-radius: 10px !important;
    }


    /* Description + amount */
    .ih-section-header:not(.ledger-header) + .ih-table th:first-child,
    .ih-section-header:not(.ledger-header) + .ih-table td:first-child {
        width: 64% !important;
    }


    .ih-section-header:not(.ledger-header) + .ih-table th:last-child,
    .ih-section-header:not(.ledger-header) + .ih-table td:last-child {
        width: 36% !important;
    }


    /* Bottom buttons */
    .ih-btn {
        font-size: 12.5px !important;
    }

}


/* =====================================================================
   EXTRA SMALL - iPhone 367 / 360 / similar
   ===================================================================== */

@media screen and (max-width: 380px) {

    body.ih-invoice-body {
        padding: 10px 7px !important;
    }


    .ih-invoice-card {
        padding: 22px 13px !important;

        border-radius: 13px !important;
    }


    .ih-grid-box {
        padding: 15px !important;
    }


    .ih-table th {
        padding: 10px 8px !important;

        font-size: 9px !important;
    }


    .ih-table td {
        padding: 10px 8px !important;

        font-size: 11.5px !important;
    }


    .ih-totals-row,
    .ih-totals-row.grand-total {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    /*
       On very narrow phones Print / Download can still
       remain side-by-side safely.
    */
    .ih-action-bar > .d-flex {
        gap: 7px !important;
    }


    .ih-action-bar > .d-flex .ih-btn {
        padding: 10px 7px !important;

        font-size: 11.5px !important;
    }

}


/* =====================================================================
   IMPORTANT:
   DO NOT let screen responsive rules damage PDF export
   ===================================================================== */

.pdf-export-mode {
    overflow: visible !important;
}


/* 1. Kalin search bar eka witharak pallahata gaththa eka reset kirima (Meka godak wadagath) */
.hp-search-group {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    margin: 0 !important;
    transform: none !important;
}

/* 2. Dark blue section eke usata (pallahin) ida thiyamu */
.hp-domain-hero {
    padding-bottom: 70px !important;
    overflow: visible !important;
}

/* 3. Mulu search box ekama (warning message ekath ekka) pallahata ganna */
.hp-search-box-container {
    margin-bottom: -70px !important; /* Box eka madata paninawa */
    position: relative !important;
    z-index: 999 !important;
}

/* 4. Yatin thiyena results saha categories list eka overlap nowenna pallahata thallu kirima */
.hp-results-container,
.hp-tld-pricing-section {
    padding-top: 80px !important; 
    position: relative !important;
    z-index: 10 !important;
}

/* 5. Warning message eke loku gap eka adu kirima */
#spaceWarningMsg {
    margin-top: 15px !important;
}

.hp-results-container, .hp-tld-pricing-section {
    padding-top: 0px !important;
    position: relative !important;
    z-index: 10 !important;
}



/* Dashboard Quick Link Icon in Header */
.header-dashboard-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.15); 
    border-radius: 50%;
    font-size: 1.15rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.header-dashboard-icon:hover {
    background-color: #28a745;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Scroll karaddi background eka sudu unoth (Scrolled Header State) */
.site-header.header-scrolled .header-dashboard-icon {
    color: #333333;
    background-color: rgba(0, 0, 0, 0.05);
}

.site-header.header-scrolled .header-dashboard-icon:hover {
    background-color: #28a745;
    color: #ffffff;
}

/* =========================================
   Mobile Devices Responsive CSS
   ========================================= */
@media (max-width: 767.98px) {
    .header-dashboard-icon {
        width: 32px;  /* Mobile eke podi karanawa */
        height: 32px;
        font-size: 1rem;
    }
    
    /* Mobile waladi user ge nama loku wadi unoth account button eka podi karanawa */
    .btn-login.dropdown-toggle {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }
}


/* =========================================================
   iHOSTER HEADER - NOTIFICATION + DASHBOARD ICON
   MOBILE / TABLET RESPONSIVE COLOR FIX
   Desktop design is NOT changed
========================================================= */

@media (max-width: 991.98px) {

    /* -----------------------------------------
       Notification Bell
       White mobile menu => dark blue icon
    ----------------------------------------- */
    .site-header .header-actions #notificationMenu {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;

        padding: 0 !important;
        margin: 0 auto !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        color: #0b2a63 !important;
        background-color: #edf4ff !important;

        border: 1px solid #dbe4f0 !important;
        border-radius: 50% !important;

        text-decoration: none !important;
        transition: all 0.3s ease !important;
    }

    .site-header .header-actions #notificationMenu > i {
        color: #0b2a63 !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }

    /* Bell Hover / Dropdown Open */
    .site-header .header-actions #notificationMenu:hover,
    .site-header .header-actions #notificationMenu.show {
        color: #ffffff !important;
        background-color: #0a7f26 !important;
        border-color: #0a7f26 !important;
        transform: translateY(-2px);
    }

    .site-header .header-actions #notificationMenu:hover > i,
    .site-header .header-actions #notificationMenu.show > i {
        color: #ffffff !important;
    }


    /* -----------------------------------------
       Dashboard / Home Icon
       White mobile menu => dark blue icon
    ----------------------------------------- */
    .site-header .header-actions .header-dashboard-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;

        padding: 0 !important;
        margin: 0 auto !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        color: #0b2a63 !important;
        background-color: #edf4ff !important;

        border: 1px solid #dbe4f0 !important;
        border-radius: 50% !important;

        text-decoration: none !important;
        transition: all 0.3s ease !important;
    }

    .site-header .header-actions .header-dashboard-icon i {
        color: inherit !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    /* Dashboard Hover */
    .site-header .header-actions .header-dashboard-icon:hover {
        color: #ffffff !important;
        background-color: #0a7f26 !important;
        border-color: #0a7f26 !important;
        transform: translateY(-2px);
    }
}


/* =========================================================
   EXTRA SMALL PHONE
========================================================= */
@media (max-width: 575.98px) {

    .site-header .header-actions #notificationMenu,
    .site-header .header-actions .header-dashboard-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .site-header .header-actions #notificationMenu > i {
        font-size: 18px !important;
    }

    .site-header .header-actions .header-dashboard-icon i {
        font-size: 16px !important;
    }
}



/* =========================================================
   iHOSTER HEADER - LAPTOP RESPONSIVE FIX
   Keeps Dashboard/Home icon visible
========================================================= */

/* Standard laptops / MacBook / smaller desktop screens */
@media (min-width: 992px) and (max-width: 1599.98px) {

    /* Reduce right-side spacing */
    .site-header .header-actions {
        gap: 12px !important;
    }

    /* Reduce dropdown wrapper extra margins */
    .site-header .header-actions .dropdown {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

    /* Slightly compact account button */
    .site-header .btn-login {
        padding: 10px 16px !important;
        white-space: nowrap !important;
        font-size: 14px !important;
    }

    /* Keep Dashboard/Home icon always visible */
    .site-header .header-dashboard-icon {
        display: inline-flex !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        align-items: center !important;
        justify-content: center !important;
    }
}


/* =========================================================
   SMALL LAPTOP RANGE
   Phone number is less important than account controls
========================================================= */

@media (min-width: 992px) and (max-width: 1399.98px) {

    .site-header .header-phone {
        display: none !important;
    }

    .site-header .header-actions {
        gap: 10px !important;
    }
}


/* Modals saha Backdrop eka Header ekatath wada udin pennima */
.modal {
    z-index: 999999 !important;
}

.modal-backdrop {
    z-index: 999998 !important;
}


.am-card {
    padding: 20px !important;
}


/* Mobile screens waladi header overlap eka fix kirima saha gap eka nathi kirima */
@media (max-width: 991px) {
    /* 1. Mada thiyena loku his idasa adu kirima */
    #main-body {
        padding-top: 15px !important; /* Kalin 110px thibba eka adu kala */
    }
    
    /* 2. Header eken kapena eka nawathwanna, Breadcrumb eka pallahata gannawa */
    .master-breadcrumb {
        padding-top: 85px !important; /* Header eke usa anuwa meka 80px, 90px wage wenas karala balanna */
    }
    
    /* Form container eka lassanata thiyanna */
    .account-management-container {
        margin-top: 10px !important;
    }
}

@media (max-width: 991.98px) {
    body {
        padding-top: 50px !important;
    }
}


/* Mobile devices wala action buttons responsive kirima */
@media (max-width: 575px) {
    /* Button container eka uda-pahalata (column) harawima */
    .am-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important; /* Buttons deka athara idasa */
        width: 100% !important;
    }
    
    /* Buttons deka screen eke palalata (100% width) hadima */
    .am-actions .am-btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: center !important; /* Text/Icon eka madata ganna */
    }
}


/* =====================================================
   CHECKOUT PAYMENT METHODS - PREMIUM RESPONSIVE LAYOUT
   ===================================================== */

#onepage-checkout-host #paymentGatewaysContainer {
    width: 100% !important;
    margin-top: 8px !important;
}

/* Helper text full width above payment options */
#onepage-checkout-host #paymentGatewaysContainer .payment-method-helper,
#onepage-checkout-host #paymentGatewaysContainer > p {
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    text-align: left !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Payment methods container */
#onepage-checkout-host #paymentGatewaysContainer > .text-center {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
}

/* Each payment option */
#onepage-checkout-host #paymentGatewaysContainer .radio-inline {
    width: 100% !important;
    min-height: 78px !important;

    margin: 0 !important;
    padding: 16px 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    background: #ffffff !important;
    border: 1px solid #dbe4f0 !important;
    border-radius: 12px !important;

    color: #14376f !important;
      font-weight: 600;
    font-size: 14px !important;

    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Hover */
#onepage-checkout-host #paymentGatewaysContainer .radio-inline:hover {
    border-color: #0a7f26 !important;
    background: #f6fbf7 !important;
}

/* Radio itself */
#onepage-checkout-host #paymentGatewaysContainer .radio-inline input[type="radio"] {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* Selected payment card */
#onepage-checkout-host #paymentGatewaysContainer .radio-inline:has(input[type="radio"]:checked) {
    border-color: #0a7f26 !important;
    background: #eef9f1 !important;
    box-shadow: 0 4px 14px rgba(10, 127, 38, 0.10) !important;
}

/* Tablet */
@media (max-width: 991.98px) {
    #onepage-checkout-host #paymentGatewaysContainer > .text-center {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    #onepage-checkout-host #paymentGatewaysContainer > .text-center {
        grid-template-columns: 1fr !important;
    }

    #onepage-checkout-host #paymentGatewaysContainer .radio-inline {
        min-height: 64px !important;
        justify-content: flex-start !important;
    }
}



/* =====================================================
   PAYMENT GATEWAY LOGOS
   ===================================================== */

#onepage-checkout-host .payment-gateway-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

#onepage-checkout-host .payment-gateway-logo {
    display: block !important;
    width: auto !important;
    max-width: 145px !important;
    height: 34px !important;
    object-fit: contain !important;
    max-height: 50px !important;
}

#onepage-checkout-host .payment-gateway-logo-crypto {
    max-width: 48px !important;
    height: 42px !important;
}

#onepage-checkout-host .payment-gateway-name {
    display: block !important;
    color: #14376f !important;
    font-size: 13px !important;
      font-weight: 600;
    line-height: 1.4 !important;
    text-align: center !important;
}



/* =====================================================
   PAYMENT METHODS - LARGER PREMIUM CARDS
   ===================================================== */

#onepage-checkout-host #paymentGatewaysContainer {
    width: 100% !important;
}

#onepage-checkout-host #paymentGatewaysContainer > .text-center {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    gap: 16px !important;

    width: 100% !important;
    max-width: 760px !important;

    margin: 0 auto !important;
}

/* Bigger card */
#onepage-checkout-host #paymentGatewaysContainer .radio-inline {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 145px !important;

    padding: 18px 16px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 14px !important;
}

/* Content */
#onepage-checkout-host .payment-gateway-content {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;
}

/* VISA / Mastercard / Amex */
#onepage-checkout-host .payment-gateway-logo {
    width: auto !important;
    max-width: 155px !important;
    height: 42px !important;
    object-fit: contain !important;
}

/* Bitcoin / USDT */
#onepage-checkout-host .payment-gateway-logo-crypto {
    width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
}

/* Payment name */
#onepage-checkout-host .payment-gateway-name {
    width: 100% !important;

    font-size: 14px !important;
      font-weight: 600;
    line-height: 1.45 !important;

    text-align: center !important;
    white-space: normal !important;
}

/* Tablet */
@media (max-width: 991.98px) {

    #onepage-checkout-host #paymentGatewaysContainer > .text-center {
        grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
        max-width: 620px !important;
    }
}

/* Mobile */
@media (max-width: 575.98px) {

    #onepage-checkout-host #paymentGatewaysContainer > .text-center {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }

    #onepage-checkout-host #paymentGatewaysContainer .radio-inline {
        min-height: 110px !important;
    }
}


#onepage-checkout-host #paymentGatewaysContainer img.payment-gateway-logo,
#onepage-checkout-host #paymentGatewaysContainer img.payment-gateway-logo-crypto {
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* VISA / Mastercard / Amex */
#onepage-checkout-host #paymentGatewaysContainer img.payment-gateway-logo {
    height: 42px !important;
    max-width: 155px !important;
}

/* Bitcoin + USDT */
#onepage-checkout-host #paymentGatewaysContainer img.payment-gateway-logo-crypto {
    height: 52px !important;
    width: 52px !important;
    max-width: 52px !important;
}



/* =====================================================
   IHOSTER ONE PAGE CHECKOUT - PREMIUM UI POLISH
   ===================================================== */

#ihoster-checkout-wrapper {
    max-width: 1180px !important;
    margin: 0 auto !important;
}

#ihoster-checkout-wrapper .ihoster-card {
    background: #ffffff !important;
    border: 1px solid #e3eaf3 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 28px rgba(11, 42, 99, 0.06) !important;
    padding: 28px !important;
    margin-bottom: 22px !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}

#ihoster-checkout-wrapper .ihoster-card:hover {
    border-color: #d2dfec !important;
    box-shadow: 0 12px 34px rgba(11, 42, 99, 0.08) !important;
}

#ihoster-checkout-wrapper .step-title-container {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

#ihoster-checkout-wrapper .step-badge {
    width: 40px !important;
    height: 40px !important;
    min-width: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #0a7f26 !important;
    color: #ffffff !important;

    border-radius: 50% !important;

    font-size: 13px !important;
      font-weight: 600;

    box-shadow: 0 5px 14px rgba(10, 127, 38, 0.18) !important;
}

#ihoster-checkout-wrapper .step-title {
    margin: 0 !important;
    color: #0b2a63 !important;
    font-size: 22px !important;
      font-weight: 600;
    line-height: 1.3 !important;
}

#ihoster-checkout-wrapper .step-desc {
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    margin: 0 0 20px 46px !important;
}

#ihoster-checkout-wrapper .form-control,
#ihoster-checkout-wrapper select {
    border: 1px solid #dbe4f0 !important;
    border-radius: 11px !important;
    min-height: 46px !important;
    background: #ffffff !important;
    color: #14376f !important;
    box-shadow: none !important;
    transition: .2s ease !important;
}

#ihoster-checkout-wrapper .form-control:focus,
#ihoster-checkout-wrapper select:focus {
    border-color: #2b5797 !important;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.10) !important;
}

#ihoster-checkout-wrapper .ihoster-btn-custom {
    min-height: 50px !important;
    border-radius: 12px !important;
      font-weight: 600;
    box-shadow: 0 8px 20px rgba(10, 127, 38, 0.16) !important;
    transition: .2s ease !important;
}

#ihoster-checkout-wrapper .ihoster-btn-custom:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 11px 24px rgba(10, 127, 38, 0.22) !important;
}

@media (max-width: 767.98px) {

    #ihoster-checkout-wrapper .ihoster-card {
        padding: 20px 16px !important;
        border-radius: 15px !important;
        margin-bottom: 16px !important;
    }

    #ihoster-checkout-wrapper .step-title {
        font-size: 22px !important;
    }

    #ihoster-checkout-wrapper .step-desc {
        margin-left: 0 !important;
        margin-top: 10px !important;
    }
}


/* =========================================
   ONE PAGE CHECKOUT - DESKTOP WIDTH POLISH
   ========================================= */

#ihoster-checkout-wrapper {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#ihoster-checkout-wrapper > .row.justify-content-center > .col-lg-9,
#ihoster-checkout-wrapper > .row.justify-content-center > .col-xl-8 {
    width: 100% !important;
    max-width: 980px !important;
    flex: 0 0 980px !important;
}

@media (max-width: 991.98px) {
    #ihoster-checkout-wrapper > .row.justify-content-center > .col-lg-9,
    #ihoster-checkout-wrapper > .row.justify-content-center > .col-xl-8 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}


#step-checkout-details {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 28px !important;
    box-shadow: 0 8px 28px rgba(11, 42, 99, 0.06) !important;
    margin-top: 22px !important;
}

#step-checkout-details .sub-heading {
    margin-top: 26px !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e8eef5 !important;
}

#step-checkout-details .sub-heading span {
    background: transparent !important;
    color: #0b2a63 !important;
      font-weight: 600;
    font-size: 15px !important;
}


/* =====================================================
   ONE PAGE CHECKOUT - READABILITY / FONT SIZE POLISH
   ===================================================== */

/* General small text inside checkout */
#ihoster-checkout-wrapper,
#ihoster-checkout-wrapper p,
#ihoster-checkout-wrapper span,
#ihoster-checkout-wrapper label,
#ihoster-checkout-wrapper small {
    font-size: 16px;
}

/* Step descriptions */
#ihoster-checkout-wrapper .step-desc,
#ihoster-checkout-wrapper .checkout-subtitle {
    font-size: 18px !important;
    line-height: 1.65 !important;
}

/* Main step headings */
#ihoster-checkout-wrapper .step-title {
    font-size: 20px !important;
    line-height: 1.35 !important;
}

/* Section headings inside billing */
#onepage-checkout-host .sub-heading span,
#onepage-checkout-host .sub-heading,
#step-checkout-details .sub-heading span {
    font-size: 16px !important;
      font-weight: 600;
}

/* Form labels */
#onepage-checkout-host label,
#onepage-checkout-host .form-control-label {
    font-size: 14px !important;
}

/* Inputs and selects */
#onepage-checkout-host .form-control,
#onepage-checkout-host select,
#onepage-checkout-host textarea {
    font-size: 15px !important;
}

/* Review order product/domain names */
#step-review-order .review-product-name,
#step-review-order .domain-name,
#step-review-order strong {
    font-size: 17px !important;
}

/* Prices */
#step-review-order .price,
#step-review-order .amount,
#step-review-order #cart-total {
    font-size: 16px !important;
      font-weight: 600;
}

/* Small meta text - billing cycle, 1 Year, etc */
#step-review-order small,
#step-review-order .text-muted {
    font-size: 13px !important;
}

/* Payment text */
#onepage-checkout-host #paymentGatewaysContainer > p {
    font-size: 15px !important;
}

#onepage-checkout-host .payment-gateway-name {
    font-size: 14px !important;
}

/* Buttons */
#ihoster-checkout-wrapper .btn,
#ihoster-checkout-wrapper button,
#ihoster-checkout-wrapper .ihoster-btn-custom {
    font-size: 15px !important;
}

/* Promo section */
#step-review-order input,
#step-review-order .promo-code-area,
#step-review-order .promo-code-area * {
    font-size: 14px !important;
}

/* Mobile - don't go too huge */
@media (max-width: 575.98px) {

    #ihoster-checkout-wrapper .step-title {
        font-size: 22px !important;
    }

    #ihoster-checkout-wrapper .step-desc {
        font-size: 14px !important;
    }

    #onepage-checkout-host .form-control,
    #onepage-checkout-host select,
    #onepage-checkout-host textarea {
        font-size: 16px !important;
    }
}


#onepage-checkout-host .domain-contact-description,
#onepage-checkout-host .domain-registration-note {
    display: none !important;
}



.ih-reset-wrapper .ih-inner-whmcs-form #inputNewPassword1,
.ih-reset-wrapper .ih-inner-whmcs-form #inputNewPassword2,
.ih-reset-wrapper .ih-inner-whmcs-form input[type="password"] {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    border: 1.5px solid #d6e0ec !important;
    border-radius: 10px !important;
    color: #0b2a63 !important;
    font-size: 15px !important;
    outline: none !important;
    box-shadow: none !important;
}

.ih-reset-wrapper .ih-inner-whmcs-form #inputNewPassword1:focus,
.ih-reset-wrapper .ih-inner-whmcs-form #inputNewPassword2:focus,
.ih-reset-wrapper .ih-inner-whmcs-form input[type="password"]:focus {
    border-color: #0a7f26 !important;
    box-shadow: 0 0 0 3px rgba(10, 127, 38, 0.10) !important;
}



/* Password Reset Left Panel Spacing Fix */
.ih-reset-wrapper .ih-reset-banner {
    justify-content: flex-start !important;
}

.ih-reset-wrapper .ih-banner-features {
    margin-top: 35px !important;
    margin-bottom: 25px !important;
}

.ih-reset-wrapper .ih-banner-footer {
    margin-top: auto !important;
}



/* =====================================================
   PASSWORD RESET - SECURITY WATERMARK
   ===================================================== */

.ih-reset-wrapper .ih-reset-banner {
    position: relative !important;
    overflow: hidden !important;
}

.ih-reset-wrapper .ih-reset-security-watermark {
    position: absolute !important;

    left: 50% !important;
    top: 61% !important;

    transform: translate(-50%, -50%) !important;

    width: 230px !important;
    height: 230px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    pointer-events: none !important;
    z-index: 0 !important;
}

.ih-reset-wrapper .ih-reset-security-watermark i {
    font-size: 190px !important;

    color: #ffffff !important;

    opacity: 0.055 !important;

    filter: blur(1px) !important;

    transform: rotate(-8deg) !important;
}

/* Keep real content above watermark */
.ih-reset-wrapper .ih-banner-top,
.ih-reset-wrapper .ih-banner-features,
.ih-reset-wrapper .ih-banner-footer {
    position: relative !important;
    z-index: 2 !important;
}


/* =====================================================
   iHoster Checkout - Select Period Typography
===================================================== */

#step-select-period .step-title {
    font-size: 24px !important;
      font-weight: 600;
}

#step-select-period .step-desc {
    font-size: 16px !important;
}

#step-select-period .billing-period-row > div:first-of-type > div:first-of-type {
    font-size: 18px !important;
      font-weight: 600;
    color: #14376f !important;
}

#step-select-period .billing-period-row > div:first-of-type > div:nth-of-type(2) {
    font-size: 14px !important;
    color: #64748b !important;
}

#step-select-period .billing-period-row > div:first-of-type > div:nth-of-type(2) strong {
    font-size: 14px !important;
      font-weight: 600;
}

#step-select-period .billing-cycle-select {
    font-size: 16px !important;
      font-weight: 600;
}


/* =====================================================
   DEDICATED SERVER HARDWARE - FONT SIZE FIX
===================================================== */

/* Configure Server Hardware heading */
.dedicated-mixed-config .step-title {
    font-size: 24px !important;
      font-weight: 600;
}


/* Server name
   Intel Xeon E3-1230 v5
   Intel Core i5-13500 */
.dedicated-mixed-config > div[style*="background:#f8fafc"] > strong {
    font-size: 22px !important;
      font-weight: 600;
    color: #0b2a63 !important;
}


/* Server description/details
   Processor
   14 Cores @ 2.5GHz
   Memory
   64GB DDR4 etc */
.dedicated-mixed-config > div[style*="background:#f8fafc"] > div {
    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* Description:
   Select your desired hardware resources... */
.dedicated-mixed-config .step-desc {
    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* Configurable Options */
.dedicated-mixed-config .ih-config-divider span {
    font-size: 16px !important;
      font-weight: 600;
}


/* RAM / Primary Storage / Bandwidth labels */
.dedicated-mixed-config .ih-config-label {
    font-size: 16px !important;
    font-weight: 500 !important;
}


/* Dropdown text */
.dedicated-mixed-config .ih-config-dropdown {
    font-size: 15px !important;
      font-weight: 600;
}


/* =========================================================
   LAPTOPS & MACBOOKS RESPONSIVE FIX (992px to 1399px)
   Prevents header items from overflowing on medium-large screens
========================================================= */
@media (min-width: 992px) and (max-width: 1399.98px) {
    /* Reduce padding between navbar links */
    .site-header .navbar-nav .nav-link {
        padding-right: 0.6rem !important;
        padding-left: 0.6rem !important;
        font-size: 0.95rem;
    }
    
    /* Reduce margin before the notification bell */
    .site-header .header-actions .dropdown.ms-3 {
        margin-left: 0.5rem !important; 
    }
    
    /* Slightly shrink the account button */
    .site-header .header-actions .btn-login {
        padding: 0.35rem 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Slightly shrink the Home/Dashboard icon */
    .site-header .header-actions .header-dashboard-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }
    
    .site-header .header-actions .header-dashboard-icon i {
        font-size: 16px !important;
    }

    /* Reduce phone number spacing */
    .header-phone {
        margin-right: 0.5rem !important;
        font-size: 0.95rem !important;
    }
}


/* =========================================================
   HEADER RESPONSIVE FIX (992px to 1250px)
   Prevents right-side icons from dropping to the next line
========================================================= */
@media (min-width: 992px) and (max-width: 1250px) {
    /* 1. Logo එක පොඩ්ඩක් කුඩා කිරීම */
    .site-header .navbar-brand img,
    .custom-dark-header .navbar-brand img {
        max-width: 200px !important;
    }

    /* 2. Menu Links වල පරතරය සහ අකුරු කුඩා කිරීම */
    .site-header .navbar-nav .nav-link,
    .custom-dark-header .navbar-nav .nav-link {
        padding-right: 8px !important;
        padding-left: 8px !important;
        font-size: 14px !important;
    }

    /* 3. ඉඩ හදාගන්න Phone Number එක මේ සයිස් එකේදී Hide කිරීම */
    .site-header .header-phone {
        display: none !important;
    }

    /* 4. දකුණු පැත්තේ Buttons සහ Icons අතර පරතරය අඩු කිරීම */
    .site-header .header-actions {
        gap: 10px !important;
    }

    /* 5. Account Button එකේ සයිස් එක ගාණට හැදීම */
    .site-header .header-actions .btn-login {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* 6. Dashboard Icon එක සහ Notification Icon එක ගාණට හැදීම */
    .site-header .header-actions .header-dashboard-icon,
    .site-header .header-actions #notificationMenu {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .site-header .header-actions .header-dashboard-icon i,
    .site-header .header-actions #notificationMenu > i {
        font-size: 16px !important;
    }
    
    /* Dropdown arrow එකේ ඉඩ අඩු කිරීම */
    .btn-login.dropdown-toggle::after {
        margin-left: 4px !important;
    }
}


/* =========================================================
   FINAL FIX: BREADCRUMB OVERLAP & HEADER ICON VISIBILITY
========================================================= */

/* 1. BREADCRUMB OVERLAP FIX (Tablet & Mobile) */
@media (max-width: 991.98px) {
    /* Header එකට යටින් ඉඩ හදාගැනීම */
    body {
        padding-top: 75px !important; 
    }
    /* Breadcrumb එක Header එක අස්සට ඇදී යන එක නැවැත්වීම */
    body:has(.ih-client-dashboard) .master-breadcrumb {
        margin-top: 0 !important; 
        padding-top: 15px !important;
    }
}

@media (max-width: 767.98px) {
    body {
        padding-top: 65px !important; 
    }
    body:has(.ih-client-dashboard) .master-breadcrumb {
        margin-top: 0 !important; 
        padding-top: 10px !important;
    }
}

/* 2. DASHBOARD ICON & HEADER RESPONSIVE FIX */
.site-header .header-actions {
    flex-wrap: nowrap !important; /* Icons පල්ලෙහාට වැටෙන එක (Wrap වෙන එක) නවත්තනවා */
}

/* Dashboard Icon එක සැඟවී යාම නවත්වනවා */
.site-header .header-dashboard-icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important; 
}

/* Laptop සයිස් එකේදී (1251px - 1400px) Phone Number එකත් පේන නිසා, අනිත් ලින්ක් වල සයිස් එක ගාණට හදා ඉඩ ලබා දීම */
@media (min-width: 1251px) and (max-width: 1400px) {
    .site-header .navbar-nav .nav-link {
        padding-right: 12px !important;
        padding-left: 12px !important;
        font-size: 15px !important;
    }
    .site-header .navbar-brand img {
        max-width: 180px !important;
    }
    .site-header .header-actions {
        gap: 15px !important;
    }
}


/* =========================================================
   ULTIMATE DASHBOARD ICON VISIBILITY FIX (LARGE SCREENS 1600px+)
========================================================= */

/* 1. Header Actions එක ඇතුළේ තියෙන දේවල් එළියට පනින එක නවත්වයි */
.site-header .header-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
}

/* 2. Home Icon එක අඩංගු Parent <div> එක අනිවාර්යයෙන්ම පෙන්වීමට */
.site-header .header-actions > .flex-shrink-0 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: 12px !important;
}

/* 3. Home Icon එක අනිවාර්යයෙන්ම පෙන්වීමට සහ හැඩය රැකගැනීමට */
.site-header .header-dashboard-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}


/* =========================================================
   ULTIMATE MASTER FIX: HEADER, BREADCRUMB & ICONS
   (Overrides all previous conflicting margins/paddings)
========================================================= */

/* 1. Fix Body Padding (Fixed Header එකට යටින් ඉඩ හැදීම) */
body {
    padding-top: 85px !important;
}
@media (max-width: 991.98px) {
    body { padding-top: 75px !important; }
}
@media (max-width: 767.98px) {
    body { padding-top: 65px !important; }
}

/* 2. Force Breadcrumb Visibility (Header එක යට හැංගෙන එක නැවැත්වීම) */
.master-breadcrumb {
    margin-top: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    background: var(--bg-light, #f7faff) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
}
body:has(.ih-client-dashboard) .master-breadcrumb {
    margin-top: 0 !important;
    display: block !important;
}

/* 3. Header Right-Side Actions (පල්ලෙහාට වැටෙන එක නැවැත්වීම) */
.site-header .header-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow: visible !important;
}

/* 4. Dashboard Icon - අනිවාර්යයෙන්ම පෙන්වීම */
.site-header .header-dashboard-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

/* 5. Mobile Hamburger Menu Alignment */
.navbar-toggler {
    margin-left: 12px !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}
@media (min-width: 992px) {
    .navbar-toggler { display: none !important; }
}

/* 6. Small Laptops (992px - 1250px) සඳහා ඉඩ හදා දීම */
@media (min-width: 992px) and (max-width: 1250px) {
    .site-header .navbar-nav .nav-link {
        padding-right: 8px !important;
        padding-left: 8px !important;
        font-size: 14px !important;
    }
    .site-header .header-phone {
        display: none !important; /* ඉඩ මදි නිසා Phone no එක ගැලෙව්වා */
    }
    .site-header .navbar-brand img {
        max-width: 200px !important;
    }
    .site-header .header-actions {
        gap: 8px !important;
    }
}


/* =========================================================
   FIX: MOBILE BREADCRUMB OVERLAP (KILL NEGATIVE MARGINS)
========================================================= */

@media (max-width: 1199.98px) {
    /* Dashboard එකේ Breadcrumb එක උඩට ඇදෙන එක සම්පූර්ණයෙන්ම නැවැත්වීම */
    body:has(.ih-client-dashboard) .master-breadcrumb,
    .master-breadcrumb {
        margin-top: 0px !important;
    }
    /* Header එකට යටින් ඉඩ හදාගැනීම */
    body {
        padding-top: 85px !important;
    }
}

@media (max-width: 767.98px) {
    body:has(.ih-client-dashboard) .master-breadcrumb,
    .master-breadcrumb {
        margin-top: 0px !important;
    }
    body {
        padding-top: 75px !important;
    }
}


/* =========================================================
   HEADER & BREADCRUMB ULTIMATE STABILITY FIX
========================================================= */

/* 1. Remove the white gap above Breadcrumb completely */
body:has(.ih-client-dashboard) .master-breadcrumb,
.master-breadcrumb {
    margin: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    background: var(--bg-light, #f7faff) !important;
}

/* 2. Prevent Header Items from Wrapping or Hiding Icons */
.site-header .header-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
}

/* 3. Keep Notification Bell & Home Icon Always Visible & Properly Sized */
.site-header .header-actions #notificationMenu,
.site-header .header-actions .header-dashboard-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
   
    min-width: 36px !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

/* 4. Smooth Responsive Scaling for Laptops & Medium Screens (992px - 1400px) */
@media (min-width: 992px) and (max-width: 1400px) {
    .site-header .navbar-nav .nav-link {
        padding-right: 6px !important;
        padding-left: 6px !important;
        font-size: 14px !important;
    }
    
    .site-header .header-phone {
        display: none !important; /* Hide phone number to save header space for icons */
    }

    .site-header .btn-login {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }

    .site-header .navbar-brand img {
        max-width: 180px !important;
    }
}




/* =========================================================
   PERFECT RESPONSIVE & HEADER/BREADCRUMB OVERRIDE FIX
========================================================= */

/* 1. Header Sticky Position & Top Alignment Fix */
.site-header, .custom-dark-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    margin: 0 !important;
}

/* 2. Dynamic Body Padding for Fixed Header Height */
body {
    padding-top: 85px !important;
}

@media (max-width: 991.98px) {
    body {
        padding-top: 75px !important;
    }
}

@media (max-width: 575.98px) {
    body {
        padding-top: 65px !important;
    }
}

/* 3. Breadcrumb Overlap & Negative Margin Removal */
.master-breadcrumb,
body:has(.ih-client-dashboard) .master-breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    background: var(--bg-light, #f7faff) !important;
    position: relative !important;
    z-index: 10 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4. Header Actions & Dashboard/Notification Icons Visibility */
.site-header .header-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
}

.site-header .header-actions #notificationMenu,
.site-header .header-actions .header-dashboard-icon,
.site-header .header-actions > div {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

/* 5. Mobile Toggle / Collapse Button Icon Fix */
.site-header .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.site-header .navbar-toggler-icon {
    filter: brightness(0) invert(1) !important; /* Dark icon turned into visible White */
}

/* 6. Laptop / Tablet Smooth Layout (992px to 1350px) */
@media (min-width: 992px) and (max-width: 1350px) {
    .site-header .navbar-brand img {
        max-width: 180px !important;
    }
    .site-header .navbar-nav .nav-link {
        padding-right: 6px !important;
        padding-left: 6px !important;
        font-size: 13.5px !important;
    }
    .site-header .header-phone {
        display: none !important; /* Hide phone number to save space */
    }
    .site-header .btn-login {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
}



/* 1. Page eka horizontally scroll wena eka nawathwama */
html, body {
    overflow-x: hidden !important;
}

/* 2. Outer Wrapper eke overflow clip eka release kirima */
#hostpapa-domain-wrapper {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* 3. Style2.css eke Specificity eka override kara Banner eka 100% full-width stretch kirima */
#hostpapa-domain-wrapper .hp-domain-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    border-radius: 0 !important;
}

/* 4. Hero Banner content center kirima */
#hostpapa-domain-wrapper .hp-domain-hero .hp-inner-container {
    max-width: 1150px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}


/* Breadcrumb saha Hero Banner athara white gap eka adu kirima */
.master-breadcrumb,
.breadcrumb,
#order-standard_cart > .breadcrumb,
#main-body .breadcrumb {
    margin-bottom: 0 !important;
    padding-bottom: 6px !important;
}

#hostpapa-domain-wrapper,
#hostpapa-domain-wrapper .hp-domain-hero {
    margin-top: 0 !important;
}

#main-body,
#order-standard_cart {
    padding-top: 0 !important;
}


/* Mobile & Tablet Specific Responsiveness */
@media (max-width: 768px) {
    #hostpapa-domain-wrapper .hp-domain-hero {
        padding: 50px 0 90px !important; /* Phone screens waladhi hero banner height eka adu kirima */
    }
    
    #hostpapa-domain-wrapper .hp-hero-title {
        font-size: 28px !important; /* Mobile waladhi title text eka podi kirima */
    }

    #hostpapa-domain-wrapper .hp-hero-subtitle {
        font-size: 14px !important;
    }
}


/* =========================================================
   FLOATING OVERLAPPING SEARCH BAR & BUTTON ALIGNMENT FIX
   ========================================================= */

/* 1. Banner padding adjustment for overlapping card */
#hostpapa-domain-wrapper .hp-domain-hero {
    padding-top: 60px !important;
    padding-bottom: 90px !important;
    position: relative !important;
}

/* 2. Floating Card Search Container (Dark/White boundary eka madata adagena yeema) */
#hostpapa-domain-wrapper .hp-search-box-container {
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 40px rgba(11, 42, 99, 0.12) !important;
    padding: 25px 30px !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    z-index: 100 !important;
    margin-bottom: -100px !important; /* Meken තමයි Box එක යට White area එකට පනින්නේ */
    border: 1px solid #e2e8f0 !important;
}

/* 3. Search Input Group & Green Search Button Alignment */
#hostpapa-domain-wrapper .hp-search-group {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 2px solid #dbe4f0 !important;
    border-radius: 50px !important;
    padding: 5px 6px 5px 20px !important;
    transition: border-color 0.2s ease !important;
}

#hostpapa-domain-wrapper .hp-search-group:focus-within {
    border-color: #0a7f26 !important;
    box-shadow: 0 0 0 4px rgba(10, 127, 38, 0.1) !important;
}

#hostpapa-domain-wrapper .hp-search-input {
    border: none !important;
    background: transparent !important;
    flex: 1 1 auto !important;
    font-size: 16px !important;
    padding: 10px 15px !important;
    color: #14376f !important;
    outline: none !important;
    box-shadow: none !important;
}

#hostpapa-domain-wrapper .hp-btn-search {
    background: #0a7f26 !important;
    color: #ffffff !important;
    border-radius: 40px !important;
    padding: 12px 35px !important;
      font-weight: 600;
    font-size: 16px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    white-space: nowrap !important;
}

#hostpapa-domain-wrapper .hp-btn-search:hover {
    background: #126d31 !important;
}

/* 4. Helper Text & Space Warning Messages Styling */
#hostpapa-domain-wrapper .hp-search-box-container .text-center,
#hostpapa-domain-wrapper #spaceWarningMsg {
    color: #64748b !important;
    font-size: 13px !important;
    margin-top: 12px !important;
}

/* 5. Below Content Spacing (Card eka nisa yata section eka wahenne nathiwenda) */
#hostpapa-domain-wrapper .hp-results-container,
#hostpapa-domain-wrapper .hp-tld-pricing-section {
    padding-top: 120px !important;
    position: relative !important;
    z-index: 10 !important;
}


/* =========================================================
   HERO BANNER VERTICAL EXTENSION & SEARCH BOX PUSH DOWN
   ========================================================= */

/* 1. Dark Banner eka yata rathu ira thiyena peththata us kirima */
#hostpapa-domain-wrapper .hp-domain-hero {
    padding-top: 120px !important;
    padding-bottom: 240px !important; /* Dark section eka pallahata hoda usak deema */
}

/* 2. Search Box card eka pallahata thallu kirima */
#hostpapa-domain-wrapper .hp-search-box-container {
    max-width: 1050px !important;
    margin-bottom: -120px !important; /* Hero section eka ekka search card eka pallahata thallu kirima */
    position: relative !important;
    z-index: 100 !important;
    padding: 30px 40px !important;
}

/* 3. Yatin thiyena section එක Search box එකට යට නොවෙන සේ Balance කිරීම */
#hostpapa-domain-wrapper .hp-results-container,
#hostpapa-domain-wrapper .hp-tld-pricing-section {
    padding-top: 160px !important;
}



/* =========================================================
   SEARCH BOX SHIFT TO BOTTOM BOUNDARY (OVERLAPPING EDGE)
   ========================================================= */

/* 1. Hero banner padding balance */
#hostpapa-domain-wrapper .hp-domain-hero {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    position: relative !important;
}

/* 2. Push Search Card DOWN to straddle the lower boundary */
#hostpapa-domain-wrapper .hp-search-box-container {
    max-width: 1050px !important;
    position: relative !important;
    transform: translateY(100px) !important; /* Search card එක කෙළින්ම පහළ මායිමට තල්ලු කිරීම */
    margin-bottom: 0 !important;
    z-index: 100 !important;
    padding: 30px 40px !important;
}

/* 3. Add top clearance for content section below */
#hostpapa-domain-wrapper .hp-results-container,
#hostpapa-domain-wrapper .hp-tld-pricing-section {
    padding-top: 140px !important;
}


/* =========================================================
   PUSH SEARCH BOX FURTHER DOWN (OVERLAP ADJUSTMENT)
   ========================================================= */

/* 1. Hero Banner Bottom Space */
#hostpapa-domain-wrapper .hp-domain-hero {
    padding-top: 80px !important;
    padding-bottom: 110px !important;
    position: relative !important;
}

/* 2. Push Search Card FURTHER DOWN */
#hostpapa-domain-wrapper .hp-search-box-container {
    max-width: 1050px !important;
    position: relative !important;
    transform: translateY(160px) !important; /* 100px idan 160px dakva pallehata thallu kala */
    margin-bottom: 0 !important;
    z-index: 100 !important;
    padding: 30px 40px !important;
}

/* 3. Below Content Clearance */
#hostpapa-domain-wrapper .hp-results-container,
#hostpapa-domain-wrapper .hp-tld-pricing-section {
    padding-top: 190px !important;
}



/* =========================================================
   SEARCH BOX EXTRA PUSH DOWN (PERFECT 50/50 BOUNDARY OVERLAP)
   ========================================================= */

/* 1. Search card eka thawa chuttak pahalata thallu kirima */
#hostpapa-domain-wrapper .hp-search-box-container {
    transform: translateY(190px) !important; /* 160px idan 210px dakva thawa chuttak pahalata kala */
}

/* 2. Yatin thiyena content section eke clearance eka balance kirima */
#hostpapa-domain-wrapper .hp-results-container,
#hostpapa-domain-wrapper .hp-tld-pricing-section {
    padding-top: 190px !important;
}


/* =========================================================
   HERO TITLE & SUBTITLE VERTICAL CENTERING (PUSH DOWN)
   ========================================================= */

/* Hero banner eke top padding eka wadi kara text eka center ekata thallu kirima */
#hostpapa-domain-wrapper .hp-domain-hero {
    padding-top: 70px !important; /* Text block eka banner eke madata thallu kirima */
}

/* Title eka saha subtitle eka athara balance spacing */
#hostpapa-domain-wrapper .hp-hero-title {
    margin-top: 15px !important;
    margin-bottom: 18px !important;
}


/* =========================================================
   REDUCE GAP BELOW SEARCH BOX & WIDEN TLD PRICING TABLE
   ========================================================= */

/* 1. Search Box eka yatin thiyena loku hidasa (gap) adu kirima */
#hostpapa-domain-wrapper .hp-results-container,
#hostpapa-domain-wrapper .hp-tld-pricing-section {
    padding-top: 110px !important; /* 230px idan 110px dakva adu kala */
}

/* 2. Pricing Table Section eka palal (wide) kirima */
#hostpapa-domain-wrapper .hp-tld-pricing-section,
#hostpapa-domain-wrapper .hp-tld-table-card {
    max-width: 1350px !important; /* 950px idan 1150px dakva wide kala */
    width: 100% !important;
}

/* 3. Yata thiyena Promo Cards section ekath wide table ekata match kirima */
#hostpapa-domain-wrapper .hp-promo-cards-section {
    max-width: 1150px !important;
    width: 100% !important;
}

/* 4. Table inner padding balance kirima */
#hostpapa-domain-wrapper .hp-tld-table-card .tld-row,
#hostpapa-domain-wrapper .hp-tld-table-card .tld-pricing-header {
    padding-left: 45px !important;
    padding-right: 45px !important;
}


/* =========================================================
   TIGHTEN GAP BETWEEN SEARCH BOX & CATEGORIES
   ========================================================= */

/* 1. Yata section eke top padding eka drastically adu kirima */
#hostpapa-domain-wrapper .hp-results-container,
#hostpapa-domain-wrapper .hp-tld-pricing-section {
    padding-top: 40px !important; /* 110px idan 40px dakva adu kala */
}

/* 2. Category Title eke top margins reset kirima */
#hostpapa-domain-wrapper .hp-tld-pricing-section .hp-section-title,
#hostpapa-domain-wrapper .domain-pricing h4 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    
}



/* =========================================================
   PROMO CARDS EXPANSION & GAP ADJUSTMENT
   ========================================================= */

/* 1. Promo Cards section container width eka Table ekata match kirima */
#hostpapa-domain-wrapper .hp-promo-cards-section {
    max-width: 1280px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 50px !important;
}

/* 2. Column max-width limits release kirima */
#hostpapa-domain-wrapper .hp-promo-cards-section .max-w-500,
#hostpapa-domain-wrapper .hp-promo-cards-section .col-md-6 {
    max-width: 100% !important;
}

/* 3. Cards deka athara gap (hidasa) wadi kirima */
#hostpapa-domain-wrapper .hp-promo-cards-section > .row {
    gap: 35px !important;
    display: flex !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#hostpapa-domain-wrapper .hp-promo-cards-section .col-md-6 {
    flex: 1 1 calc(50% - 20px) !important; /* Columns deka 50/50 beda gap eka thaba ganima */
    padding: 0 !important;
}

/* 4. Promo cards wala outer size & inner padding loku kirima */
#hostpapa-domain-wrapper .hp-promo-card {
    padding: 45px 40px !important;
    border-radius: 20px !important;
    min-height: 250px !important;
}

/* 5. Card text & button typography adjustments */
#hostpapa-domain-wrapper .hp-promo-content h3 {
    font-size: 26px !important;
    margin-bottom: 12px !important;
}

#hostpapa-domain-wrapper .hp-promo-sub {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}


/* =========================================================
   ONLY MOBILE & TABLET FIX (DESKTOP UNTOUCHED)
   ========================================================= */
@media (max-width: 991px) {
    /* 1. Mobile & Tablet Screen Overflow Fix */
    html, body { overflow-x: hidden !important; }
    
    /* 2. Hero Banner Scale Down */
    #hostpapa-domain-wrapper .hp-domain-hero {
        padding-top: 50px !important;
        padding-bottom: 70px !important;
    }
    #hostpapa-domain-wrapper .hp-hero-title { font-size: 26px !important; }

    /* 3. Search Box Stack & Typing Fix */
    #hostpapa-domain-wrapper .hp-search-box-container {
        max-width: 92% !important;
        transform: translateY(30px) !important; /* Mobile offset */
        padding: 15px !important;
        z-index: 999 !important; /* Type krnna puluwan wenna */
        pointer-events: auto !important;
    }
    #hostpapa-domain-wrapper .hp-search-group {
        flex-direction: column !important;
        border-radius: 12px !important;
        gap: 10px !important;
    }
    #hostpapa-domain-wrapper .hp-search-input {
        width: 100% !important;
        text-align: center !important;
    }
    #hostpapa-domain-wrapper .hp-btn-search {
        width: 100% !important;
    }

    /* 4. Gap Fix Below Search */
    #hostpapa-domain-wrapper .hp-results-container,
    #hostpapa-domain-wrapper .hp-tld-pricing-section {
        padding-top: 60px !important;
    }

    /* 5. Table Touch Scroll (Therapenne nathi wenna) */
    #hostpapa-domain-wrapper .hp-tld-table-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #hostpapa-domain-wrapper .hp-tld-table-card .tld-row,
    #hostpapa-domain-wrapper .hp-tld-table-card .tld-pricing-header {
        min-width: 550px !important; 
    }

    /* 6. Promo Cards Vertical Stack */
    #hostpapa-domain-wrapper .hp-promo-cards-section > .row {
        flex-direction: column !important;
        gap: 15px !important;
    }
    #hostpapa-domain-wrapper .hp-promo-cards-section .col-md-6 {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}


/* =========================================================
   ONLY MOBILE & TABLET FIX (DESKTOP UNTOUCHED) - FINAL
   ========================================================= */
@media (max-width: 991.98px) {
    /* 1. Global Overflow Fix */
    html, body { overflow-x: hidden !important; }
    
    /* 2. Hero Banner Scale Down */
    #hostpapa-domain-wrapper .hp-domain-hero {
        padding-top: 50px !important;
        padding-bottom: 70px !important;
    }
    #hostpapa-domain-wrapper .hp-hero-title { font-size: 26px !important; }

    /* 3. Search Box Stack & Typing Fix */
    #hostpapa-domain-wrapper .hp-search-box-container {
        max-width: 92% !important;
        transform: translateY(30px) !important;
        padding: 15px !important;
        z-index: 999 !important;
        pointer-events: auto !important;
    }
    #hostpapa-domain-wrapper .hp-search-group {
        flex-direction: column !important;
        border-radius: 12px !important;
        gap: 10px !important;
    }
    #hostpapa-domain-wrapper .hp-search-input {
        width: 100% !important;
        text-align: center !important;
    }
    #hostpapa-domain-wrapper .hp-btn-search {
        width: 100% !important;
    }

    /* 4. Gap Fix Below Search */
    #hostpapa-domain-wrapper .hp-results-container,
    #hostpapa-domain-wrapper .hp-tld-pricing-section {
        padding-top: 60px !important;
    }

    /* 5. Promo Cards Vertical Stack */
    #hostpapa-domain-wrapper .hp-promo-cards-section > .row {
        flex-direction: column !important;
        gap: 15px !important;
    }
    #hostpapa-domain-wrapper .hp-promo-cards-section .col-md-6 {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

/* =========================================================
   PRICING TABLE RESPONSIVE LOGIC (THE REAL FIX)
   ========================================================= */

/* TABLET (768px - 991px): Horizontal Scroll Only */
@media (min-width: 768px) and (max-width: 991.98px) {
    #hostpapa-domain-wrapper .hp-tld-table-card {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #hostpapa-domain-wrapper .hp-tld-table-card .tld-pricing-header,
    #hostpapa-domain-wrapper .hp-tld-table-card .tld-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        min-width: 800px !important; /* iPad වලදී Scroll වීමට බල කිරීම */
    }
    #hostpapa-domain-wrapper .hp-tld-table-card .col-md-4 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    #hostpapa-domain-wrapper .hp-tld-table-card .col-md-8 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }
}

/* MOBILE (Below 768px): Restore Native Cards, Kill Bad Scroll */
@media (max-width: 767.98px) {
    #hostpapa-domain-wrapper .hp-tld-table-card {
        overflow-x: visible !important;
    }
    #hostpapa-domain-wrapper .hp-tld-table-card .tld-pricing-header {
        display: none !important; /* Mobile වලදී Desktop Header එක සැඟවීම */
    }
    #hostpapa-domain-wrapper .hp-tld-table-card .tld-row {
        min-width: 0 !important; /* වැරදි Scroll Width එක අහෝසි කිරීම */
        display: block !important; 
    }
}


/* =========================================================
   HERO BANNER BACKGROUND IMAGE FADE ANIMATION
   ========================================================= */

/* 1. Hero banner එකට Dark Overlay එකක් දාලා, Pseudo-elements වලට ඉඩ හැදීම */
#hostpapa-domain-wrapper .hp-domain-hero {
    position: relative !important;
    background-color: rgba(11, 42, 99, 0.85) !important; /* Text එක පේන්න 85% Dark Blue overlay එකක් */
    z-index: 1 !important;
}

/* 2. Images දෙක තියාගන්න Base Layers සැකසීම */
#hostpapa-domain-wrapper .hp-domain-hero::before,
#hostpapa-domain-wrapper .hp-domain-hero::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    bottom: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: -1 !important; /* Overlay එකට යටින් තැබීම */
}

/* 3. පළවෙනි Image එක (Dark Overlay එකක් සහිතව) */
#hostpapa-domain-wrapper .hp-domain-hero::before {
    background-image: linear-gradient(rgba(11, 42, 99, 0.75), rgba(11, 42, 99, 0.75)), url('/billing/templates/mytheme/images/register-bg1.webp') !important;
    animation: heroFade1 12s infinite !important;
}

/* 4. දෙවැනි Image එක (Dark Overlay එකක් සහිතව) */
#hostpapa-domain-wrapper .hp-domain-hero::after {
    background-image: linear-gradient(rgba(11, 42, 99, 0.75), rgba(11, 42, 99, 0.75)), url('/billing/templates/mytheme/images/register-bg2.webp') !important;
    animation: heroFade2 12s infinite !important;
}

/* 5. Smooth Fade Keyframes (තත්පර 12ක Loop එක) */
@keyframes heroFade1 {
    0%, 40% { opacity: 1; }
    50%, 90% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes heroFade2 {
    0%, 40% { opacity: 0; }
    50%, 90% { opacity: 1; }
    100% { opacity: 0; }
}

/* =========================================================
   HERO TITLE GREEN TEXT HIGHLIGHT
   ========================================================= */
#hostpapa-domain-wrapper .hp-hero-title .hp-green-text {
    color:#0fb738 !important; /* Search button eke green color eka */
}



/* Scroll වෙද්දී Background එක සුදු කිරීම */
.site-header.header-scrolled,
.custom-dark-header.header-scrolled {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

/* Menu Text සහ Icons තද නිල් කිරීම */
.site-header.header-scrolled .nav-link,
.site-header.header-scrolled .header-phone span,
.site-header.header-scrolled .header-phone i,
.site-header.header-scrolled #notificationMenu i,
.site-header.header-scrolled .header-dashboard-icon i {
    color: #ffffff !important;
}



/* ==========================================================================
   iHoster.net - Mass Payment Page Premium Design
   ========================================================================== */

/* Font and Base Styles for Mass Pay */
form[action*="action=masspay"] {
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
}

/* Main Cards Setup */
form[action*="action=masspay"] .card {
    border: none;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-card);
    background-color: var(--bg-white);
    margin-bottom: 30px;
    overflow: hidden;
}

form[action*="action=masspay"] .card-body {
    padding: 30px;
}

form[action*="action=masspay"] .card-title {
    color: var(--primary-dark);
         font-weight: 600;
    margin-bottom: 10px;
    font-size: 1.5rem;
}

form[action*="action=masspay"] .text-muted {
    color: var(--text-muted) !important;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

/* ---------------------------------------------------
   Table Design 
   --------------------------------------------------- */
form[action*="action=masspay"] .table {
    margin-top: 20px;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

/* Table Headers */
form[action*="action=masspay"] .table thead th {
    background-color: var(--bg-blue-soft);
    color: var(--primary-color);
         font-weight: 600;
    border: none;
    padding: 16px 20px;
    font-size: 0.9rem;
}

form[action*="action=masspay"] .table thead th:first-child { 
    border-top-left-radius: var(--border-radius-sm); 
}
form[action*="action=masspay"] .table thead th:last-child { 
    border-top-right-radius: var(--border-radius-sm); 
    text-align: right;
}

/* Invoice Number Group Header */
form[action*="action=masspay"] td.bg-default {
    background-color: var(--primary-soft) !important;
    color: var(--primary-dark);
         font-weight: 600;
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
}

/* Invoice Items */
form[action*="action=masspay"] .masspay-invoice-detail td {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    color: var(--text-dark);
    vertical-align: middle;
    font-size: 0.95rem;
}

form[action*="action=masspay"] .masspay-invoice-detail td:last-child {
    text-align: right;
    font-weight: 500;
}

/* Totals Section */
form[action*="action=masspay"] .masspay-total td {
    background-color: var(--bg-light);
    color: var(--text-dark);
    border: none;
    padding: 12px 20px;
    font-size: 0.95rem;
}

form[action*="action=masspay"] .masspay-total td:last-child {
    text-align: right;
         font-weight: 600;
}

/* Final Total Due Highlight */
form[action*="action=masspay"] .masspay-total:last-child td {
    background-color: var(--bg-soft-green);
    color: var(--accent-hover);
    font-size: 1.15rem;
         font-weight: 600;
    padding: 18px 20px;
}
form[action*="action=masspay"] .masspay-total:last-child td:first-child {
    border-bottom-left-radius: var(--border-radius-sm);
}
form[action*="action=masspay"] .masspay-total:last-child td:last-child {
    border-bottom-right-radius: var(--border-radius-sm);
}

/* ---------------------------------------------------
   Payment Gateway Section 
   --------------------------------------------------- */
form[action*="action=masspay"] .card.bg-default {
    background-color: var(--bg-white) !important;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
}

form[action*="action=masspay"] .card.bg-default .card-header {
    background-color: var(--primary-soft);
    border-bottom: 1px solid var(--border-color);
    padding: 18px 25px;
}

form[action*="action=masspay"] .card.bg-default .card-title {
    font-size: 1.2rem;
    margin: 0;
}

form[action*="action=masspay"] select#paymentmethod {
    border-radius: var(--border-radius-sm);
    border: 2px solid var(--border-color);
    padding: 12px 15px;
    height: auto;
    color: var(--text-dark);
    font-weight: 500;
    background-color: var(--bg-light);
    transition: var(--transition);
    cursor: pointer;
}

form[action*="action=masspay"] select#paymentmethod:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 42, 99, 0.1);
    background-color: var(--bg-white);
}

/* Payment Button */
form[action*="action=masspay"] #btnMassPayMakePayment {
    background-color: var(--accent-color);
    border: none;
    color: var(--text-white);
    padding: 14px 20px;
         font-weight: 600;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

form[action*="action=masspay"] #btnMassPayMakePayment:hover {
    background-color: var(--accent-hover);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}



/* ==========================================================================
   Fix Bottom Card Alignment (Make it Full Width & Inline)
   ========================================================================== */

/* Override Bootstrap grid to make the card full width */
form[action*="action=masspay"] .row {
    margin-left: 0;
    margin-right: 0;
}

form[action*="action=masspay"] .col-sm-6.offset-sm-3 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
    padding: 0;
}

/* Adjust card padding to match top card */
form[action*="action=masspay"] .card.bg-default .card-body {
    padding: 30px;
}

/* Make Dropdown and Button inline for desktop */
@media (min-width: 768px) {
    form[action*="action=masspay"] .card.bg-default .col-md-12 {
        display: flex;
        align-items: flex-end;
        gap: 20px;
        padding: 0;
    }

    form[action*="action=masspay"] .card.bg-default .form-group:first-child {
        flex: 1; /* Dropdown takes remaining space */
        margin-bottom: 0;
    }

    form[action*="action=masspay"] .card.bg-default .form-group:last-child {
        flex: 0 0 300px; /* Fixed width for the button */
        margin-bottom: 0;
    }
    
    form[action*="action=masspay"] #btnMassPayMakePayment {
        margin-top: 0;
        height: 50px; /* Match the height with dropdown */
    }
    
    form[action*="action=masspay"] select#paymentmethod {
        height: 50px; /* Ensure dropdown matches button height */
    }
}



/* Adjust Home Dashboard Icon Size to Match Profile Button */
.site-header .header-dashboard-icon {
    border-radius: 10px !important;
    width: 44px !important;  /* 38px idan 44px walata wadi kala */
    height: 44px !important; /* Button eke height ekatamath match kala */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--accent-color, #0a7f26) !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.site-header .header-dashboard-icon:hover {
    background-color: var(--accent-hover, #126d31) !important;
    transform: translateY(-1px);
}

.site-header .header-dashboard-icon i {
    font-size: 25px !important; /* Athule thiyena house icon ekath loku kala */
}

@media (min-width: 992px) {
    .site-header .container {
        max-width: 1500px !important;
    }
}




/* =========================================================
   MOBILE / SMALL DEVICES ONLY - LOGO SIZE ENLARGEMENT
========================================================= */
@media (max-width: 575.98px) {
    /* 1. Logo Container එකේ Size Limits ලිහිල් කිරීම */
    .site-header .navbar-brand,
    .clean-brand {
        max-width: 220px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* 2. Logo Images දෙකෙහිම Width & Height වැඩි කිරීම */
    .site-header .navbar-brand img,
    .site-header .logo-default,
    .site-header .logo-scrolled {
        width: 180px !important;       /* Inspect එකෙන් දැම්ම 180px - 200px ප්‍රමාණය */
        max-width: 200px !important;
        height: auto !important;
        max-height: 50px !important;   /* Height එක හිර නොවී ලොකු වීමට */
    }

    /* 3. Logo එක ලොකු වෙද්දී Header Bar එකත් ගාණට Balance වීම */
    .site-header .navbar {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* 4. Header එක ලොකු වෙනකොට යට Content එක වහන්නේ නැති වෙන්න */
    body {
        padding-top: 80px !important;
    }
}

/* =========================================================
   TABLET & MOBILE LOGO & HEADER ENLARGEMENT FIX
   (Targeting iPad Air, Mobile & Small Devices below 992px)
========================================================= */
@media (max-width: 991.98px) {
    /* 1. Logo Container එකේ Size Limits ලිහිල් කිරීම */
    html body .site-header .navbar-brand,
    html body .clean-brand {
        max-width: 220px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* 2. Logo Images වල Width & Height වැඩි කිරීම (200px) */
    html body .site-header .navbar-brand img,
    html body .site-header .logo-default,
    html body .site-header .logo-scrolled {
        width: 200px !important;        /* Logo එක 200px කිරීමට */
        max-width: 200px !important;
        height: auto !important;
        max-height: 55px !important;    /* Height එක හිර නොවී ලොකු වීමට */
    }

    /* 3. Header Bar එකේ Vertical Padding එක වැඩි කර උස හදාගැනීම */
    html body .site-header .navbar {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    /* 4. Header එක ලොකු වෙද්දී යට Content/Breadcrumb එක වහන්නේ නැති වෙන්න */
    body {
        padding-top: 85px !important;
    }
}


/* =========================================================
   HEADER & BREADCRUMB OVERLAP PERMANENT FIX
========================================================= */

/* 1. Tablet Screens (iPad Air / 991px and below) */
@media (max-width: 991.98px) {
    /* Fixed Header eke usa anuwa body top spacing eka */
    body {
        padding-top: 95px !important;
    }
    
    /* Breadcrumb eka fixed header eken eliyata aran lassanata align kirima */
    .master-breadcrumb,
    body:has(.ih-client-dashboard) .master-breadcrumb {
        margin-top: 0 !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        position: relative !important;
        z-index: 20 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* 2. Mobile Screens (767px and below) */
@media (max-width: 767.98px) {
    body {
        padding-top: 85px !important;
    }
}

/* 3. Small Mobile Screens (575px and below) */
@media (max-width: 575.98px) {
    body {
        padding-top: 80px !important;
    }
}


/* =========================================================
   BILLING AREA MOBILE MENU FIX (DARK DRAWER + INLINE ICONS)
========================================================= */
@media (max-width: 991.98px) {
    /* 1. Ensure Mobile Menu Drawer is Dark Blue */
    html body header.site-header .navbar-collapse {
        background: linear-gradient(135deg, #061b42 0%, #0b2a63 65%, #123f8c 100%) !important;
        border-radius: 22px !important;
        padding: 22px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 22px 55px rgba(6, 27, 66, 0.28) !important;
    }

    /* 2. Fix Nav Link text colors to white */
    html body header.site-header .navbar-collapse .navbar-nav .nav-link {
        color: #ffffff !important;
        background: transparent !important;
    }

    /* 3. Keep Mega Menu White */
    html body header.site-header .navbar-collapse .mega-menu {
        background: #ffffff !important;
        border-radius: 12px !important;
    }
    html body header.site-header .navbar-collapse .mega-menu h5 {
        color: #0b2a63 !important;
    }
    html body header.site-header .navbar-collapse .mega-menu p {
        color: #64748b !important;
    }

    /* =========================================
       4. ICON & BUTTON ALIGNMENT FIX 
    ========================================= */
    /* Make the wrapper a flex row */
    html body header.site-header .mobile-actions-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        margin-top: 25px !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
        width: 100% !important;
    }

    /* Reset margins on the inner divs so they sit next to each other */
    html body header.site-header .mobile-actions-wrapper > div {
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    /* Account Button Wrapper - Force Full Width at the bottom */
    html body header.site-header .mobile-actions-wrapper > div:has(.btn-login) {
        width: 100% !important;
        order: 10 !important; /* Pushes the button below the icons */
        display: flex !important;
    }

    /* The "Hello, X" Button */
    html body header.site-header .mobile-actions-wrapper .btn-login {
        background-color: var(--accent-color, #0a7f26) !important;
        border-color: var(--accent-color, #0a7f26) !important;
        color: #ffffff !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
          font-weight: 600;
        display: flex !important;
    }

    /* Icons (Cart, Bell, Home) */
    html body header.site-header .mobile-actions-wrapper .cart-link,
    html body header.site-header .mobile-actions-wrapper #notificationMenu,
    html body header.site-header .mobile-actions-wrapper .header-dashboard-icon {
        background-color: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        border-radius: 12px !important;
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        position: relative !important;
        text-decoration: none !important;
    }

    /* Ensure icon itself is white and centered */
    html body header.site-header .mobile-actions-wrapper i {
        color: #ffffff !important;
        font-size: 20px !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* Notification Badges Fix (Red/Green dots) */
    html body header.site-header .mobile-actions-wrapper .badge {
        position: absolute !important;
        top: -6px !important;
        right: -6px !important;
        transform: none !important;
        border: none !important;
        font-size: 10px !important;
        padding: 4px 6px !important;
        margin: 0 !important;
    }
}

/* =========================================================
   ULTIMATE ICON ALIGNMENT FIX FOR MOBILE MENU (WITH GAPS)
========================================================= */
@media (max-width: 991.98px) {
    /* 1. Force the wrapper into a Row */
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 25px !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    /* 2. Make Icon Containers sit next to each other WITH A GAP */
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper > div {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 8px !important; /* <--- මෙතනින් තමා අයිකන් අතර Gap එක හැදෙන්නේ */
        padding: 0 !important;
        display: flex !important;
    }

    /* 3. Push the "Hello, Biseka" Button Container to a new line at the bottom */
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper > div:has(.btn-login) {
        flex: 0 0 100% !important;
        width: 100% !important;
        order: 10 !important; 
        margin: 15px 0 0 0 !important; /* <--- කොළ පාට බොත්තමට උඩින් ඉඩක් හැදුවා */
    }

    /* 4. Style the Icons (Cart, Bell, Home) */
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper a.cart-link,
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper a#notificationMenu,
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper a.header-dashboard-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        padding: 0 !important;
        position: relative !important;
    }

    /* 5. Force Icon color to White */
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper a i {
        color: #ffffff !important;
        font-size: 20px !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* 6. Green Button Styling */
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper .btn-login {
        background-color: var(--accent-color, #0a7f26) !important;
        border-color: var(--accent-color, #0a7f26) !important;
        color: #ffffff !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
          font-weight: 600;
        box-shadow: 0 4px 12px rgba(10, 127, 38, 0.2) !important;
    }

    /* 7. Fix Red/Green Notification Badges */
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper .badge {
        position: absolute !important;
        top: -6px !important;
        right: -6px !important;
        border: none !important;
        transform: none !important;
        margin: 0 !important;
    }
}


/* =========================================================
   iHOSTER CHECKOUT - PREMIUM FULL-WIDTH UI FIX
   ========================================================= */

/* 1. Main Background eka wenas kireema (His ida fill wenna) */
body {
    background-color: #f4f7fa !important;
}

/* 2. Container eke Width eka wadi kireema (His ida adu wenna) */
#ihoster-checkout-wrapper > .row.justify-content-center > .col-lg-9,
#ihoster-checkout-wrapper > .row.justify-content-center > .col-xl-8 {
    width: 100% !important;
    max-width: 1100px !important; /* Kalin thibbe 980px, eka 1100px karala palal kala */
    flex: 0 0 1100px !important;
}

/* 3. Cards wala design eka wadi diyunu kireema (Premium Look) */
#ihoster-checkout-wrapper .ihoster-card {
    background: #ffffff !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 20px !important; /* Corners thawa rawum kala */
    padding: 40px 45px !important; /* Athule ida loku kala */
    box-shadow: 0 12px 40px rgba(11, 42, 99, 0.08) !important; /* Shadow eka clear kala */
    margin-bottom: 30px !important;
}

/* 4. Form Inputs loku kireema (Palal wunama inputs podiyata penne nathi wenna) */
#ihoster-checkout-wrapper .form-control,
#ihoster-checkout-wrapper select {
    height: 52px !important; /* Inputs wala usa wadi kala */
    font-size: 15px !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    background: #fdfdfe !important;
}

/* 5. Review Order Section eke list items wala ida wadi kireema */
.onepage-review-item {
    padding: 24px 0 !important; /* Items athara gap eka loku kala */
}

.onepage-review-name {
    font-size: 18px !important; /* Product name eka loku kala */
}

/* 6. Payment Gateways loku kireema */
#onepage-checkout-host #paymentGatewaysContainer .radio-inline {
    min-height: 90px !important; /* Payment options wala box loku kala */
    font-size: 15px !important;
}

/* Mobile Responsiveness (Phone wala out yanne nathi wenna) */
@media (max-width: 768px) {
    #ihoster-checkout-wrapper > .row.justify-content-center > .col-lg-9,
    #ihoster-checkout-wrapper > .row.justify-content-center > .col-xl-8 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 15px !important;
    }
    
    #ihoster-checkout-wrapper .ihoster-card {
        padding: 25px 20px !important;
    }
}



/* =========================================================
   CHECKOUT PAGE - BACKGROUND MASKING & PREMIUM LOOK
   ========================================================= */

/* 1. Page Background eka soft gray kireema saha Subtle Blobs damma */
body {
    background-color: #f4f7fa !important;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(11, 42, 99, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 90% 60%, rgba(10, 127, 38, 0.04) 0%, transparent 40%) !important;
    background-attachment: fixed;
}

/* 2. Top Dark Blue Banner Illusion eka hadima */
#ihoster-checkout-wrapper {
    position: relative;
    z-index: 1;
    padding-top: 40px !important;
}

/* 1. Main Background Gradient (Solid Blue Banner) */
#ihoster-checkout-wrapper::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 340px;
    background: linear-gradient(135deg, #0b2a63 0%, #11367c 100%);
    z-index: -2; /* Image ekata yatin thiyanna -2 kala */
    box-shadow: 0 10px 30px rgba(11, 42, 99, 0.1);
}

/* 2. Banner eka athulata dana Image eka (Aluth) */

#ihoster-checkout-wrapper::after {
    content: '';
    position: absolute;
    top: -40px; 
    left: 0;
    width: 100%;
    height: 340px; 
    
    background-image: url('/billing/templates/mytheme/images/shopping.webp'); 
    background-repeat: no-repeat;
    
    /* ME TIKA WENAS KARANNA */
    background-position: right 5% center; /* Dakunu ainetama ganna (5% space ekak thiyala) */
    background-size: 250px; /* Ainetama yana nisa size eka poddak loku kara */
    
    opacity: 0.08; /* Aine thiyena nisa opacity eka yantham adu kala wada premium penna */
    filter: invert(1); 
    z-index: -1; 
    pointer-events: none; 
}

/* 3. Title text eka Dark Banner eka uda penna White kireema */
#ihoster-checkout-wrapper .checkout-title {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

#ihoster-checkout-wrapper .checkout-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* 4. Cards wala border ain karala Shadow eka loku kireema (Floating look) */
#ihoster-checkout-wrapper .ihoster-card {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 15px 40px rgba(11, 42, 99, 0.08) !important;
}



/* =========================================================
   CHECKOUT PAGE - PREMIUM OVERLAP & WIDTH FIX
   ========================================================= */

/* 1. Mulu Container eka Palal Kireema (Depaththe ida cover wenda) */
#ihoster-checkout-wrapper > .row.justify-content-center > .col-lg-9,
#ihoster-checkout-wrapper > .row.justify-content-center > .col-xl-8 {
    width: 100% !important;
    max-width: 1080px !important; /* Container eka godak palal kara */
    flex: 0 0 100% !important;
}

/* 2. Premium Overlap Effect (Blue Banner eka udin form eka thabima) */
#ihoster-checkout-wrapper > .row.justify-content-center {
    margin-top: -100px !important; /* Meken Form eka blue banner eka udin overlap wenawa */
    position: relative;
    z-index: 10;
}

/* 3. Cards Wala Design Eka Strong Kireema */
#ihoster-checkout-wrapper .ihoster-card {
    padding: 45px 50px !important; /* Card eka athule ida (breathing room) wadi kala */
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(11, 42, 99, 0.08) !important; /* Shadow eka loku kala */
    border: 1px solid #e9eef5 !important;
    background: #ffffff !important;
}

/* 4. Title Text ekata wada Premium Look ekak deema */
#ihoster-checkout-wrapper .checkout-title {
    margin-bottom: 15px !important;
}

#ihoster-checkout-wrapper .step-title {
    font-size: 26px !important; /* Step titles loku kala */
    letter-spacing: -0.5px !important;
}

/* 5. Mobile Screens waladi Overlap eka hadima */
@media (max-width: 768px) {
    #ihoster-checkout-wrapper > .row.justify-content-center {
        margin-top: -50px !important;
    }
    #ihoster-checkout-wrapper .ihoster-card {
        padding: 30px 20px !important; /* Phone ekedi padding eka ganamata haduwa */
    }
}



/* Title eka card eken wahenne nathi wenna ida hadima */
#ihoster-checkout-wrapper > .row.mb-4 {
    padding-bottom: 90px !important; /* Card ekata udin overlap wenna ida denawa */
    position: relative;
    z-index: 20; /* Text eka udinma thiyanna */
}


/* =========================================================
   iHOSTER SINGLE-COLUMN PREMIUM CHECKOUT (NO 2-COLUMN)
   ========================================================= */

/* 1. Revert to Centered Single Column & Set Optimal Width */
#ihoster-checkout-wrapper > .row.justify-content-center > .col-lg-9,
#ihoster-checkout-wrapper > .row.justify-content-center > .col-xl-8 {
    display: block !important;
    width: 100% !important;
    max-width: 1020px !important; /* 1020px single column width */
    flex: 0 0 1020px !important;
    margin: 0 auto !important;
}

/* 2. Smooth Banner Overlap */
#ihoster-checkout-wrapper > .row.justify-content-center {
    margin-top: -70px !important;
    position: relative;
    z-index: 10;
}

/* 3. SaaS Elevated Cards with Top Accent Borders */
#ihoster-checkout-wrapper .ihoster-card {
    padding: 40px 48px !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid #0b2a63 !important; /* Top Blue Brand Line */
    background: #ffffff !important;
    box-shadow: 0 20px 40px rgba(11, 42, 99, 0.07) !important;
    margin-bottom: 28px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#ihoster-checkout-wrapper .ihoster-card:hover {
    box-shadow: 0 25px 50px rgba(11, 42, 99, 0.1) !important;
}

/* Review Order Card Accent */
#step-review-order {
    border-top-color: #0a7f26 !important; /* Green Accent for Review Step */
}

/* 4. Ambient Background Mesh (Fixes Empty Margins) */
body {
    background-color: #f4f7fa !important;
    background-image: 
        radial-gradient(circle at 12% 20%, rgba(11, 42, 99, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 88% 65%, rgba(10, 127, 38, 0.05) 0%, transparent 45%) !important;
    background-attachment: fixed !important;
}

/* 5. Typography & Badges Polish */
#ihoster-checkout-wrapper .step-badge {
    background: #0b2a63 !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
}

#ihoster-checkout-wrapper .step-title {
    font-size: 24px !important;
      font-weight: 600;
    color: #0b2a63 !important;
}

/* Mobile Safety */
@media (max-width: 991px) {
    #ihoster-checkout-wrapper > .row.justify-content-center > .col-lg-9 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    #ihoster-checkout-wrapper .ihoster-card {
        padding: 28px 20px !important;
    }
}



/* =========================================================
   CHECKOUT CONTENT WIDENING (EXPANDED SINGLE-COLUMN)
   ========================================================= */

/* 1. Mada Cards Container eka Palal Kireema (Expanded to 1300px) */
#ihoster-checkout-wrapper > .row.justify-content-center > .col-lg-9,
#ihoster-checkout-wrapper > .row.justify-content-center > .col-xl-8 {
    width: 100% !important;
    max-width: 1300px !important; /* Container width expanded */
    flex: 0 0 100% !important;
    margin: 0 auto !important;
}

/* 2. Cards Inner Padding & Stretch Adjustments */
#ihoster-checkout-wrapper .ihoster-card {
    padding: 40px 50px !important;
    border-radius: 20px !important;
}

/* 3. Billing period rows lassanata stretched wela penimata */
#step-select-period .billing-period-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 30px !important;
    padding: 18px 24px !important;
}

/* 4. Review Order Rows Stretch Kireema */
.onepage-review-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* 5. Custom Nameservers Box Stretch */
.ih-nameservers-box {
    width: 100% !important;
}

/* Responsive Protection (Screen eken eliyata pannela yanne nathuwa thiya ganimata) */
@media (max-width: 1350px) {
    #ihoster-checkout-wrapper > .row.justify-content-center > .col-lg-9,
    #ihoster-checkout-wrapper > .row.justify-content-center > .col-xl-8 {
        max-width: 95% !important;
    }
}

@media (max-width: 768px) {
    #ihoster-checkout-wrapper .ihoster-card {
        padding: 25px 20px !important;
    }
}


/* =========================================================
   FIX: 100% FULL-WIDTH CUSTOM NAMESERVERS BOX
   ========================================================= */

/* 1. Nameservers තියෙන item එක Grid එකකට හරවා ගැනීම */
.onepage-review-item:has(.ih-nameservers-box) {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    row-gap: 4px !important;
    column-gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
    padding: 22px 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* 2. Info wrapper එකේ children කෙළින්ම Grid එකට pass කිරීම */
.onepage-review-item:has(.ih-nameservers-box) > .onepage-review-info {
    display: contents !important;
}

/* 3. Domain Info (Wam paththe elements) */
.onepage-review-item:has(.ih-nameservers-box) .onepage-review-label,
.onepage-review-item:has(.ih-nameservers-box) .onepage-review-name,
.onepage-review-item:has(.ih-nameservers-box) .onepage-review-meta {
    grid-column: 1 !important;
    display: block !important;
    margin: 0 !important;
}

.onepage-review-item:has(.ih-nameservers-box) .onepage-review-label {
    font-size: 11px !important;
      font-weight: 600;
    text-transform: uppercase !important;
    color: #0a7f26 !important;
}

.onepage-review-item:has(.ih-nameservers-box) .onepage-review-name {
    font-size: 18px !important;
      font-weight: 600;
    color: #14376f !important;
    word-break: break-word !important;
}

.onepage-review-item:has(.ih-nameservers-box) .onepage-review-meta {
    font-size: 13px !important;
    color: #64748b !important;
}

/* 4. Price Block (Dakunu paththe Udinma fix කිරීම) */
.onepage-review-item:has(.ih-nameservers-box) > .onepage-review-price {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    text-align: right !important;
    white-space: nowrap !important;
    align-self: start !important;
}

/* 5. Nameservers Box එක 100% Full-Width දිග ඇරීම (Column 1 idan end වෙනකම්) */
.onepage-review-item:has(.ih-nameservers-box) .ih-nameservers-box,
.ih-nameservers-box {
    grid-column: 1 / -1 !important; /* Spans 100% full width */
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    padding: 22px 25px !important;
    box-sizing: border-box !important;
}

/* 6. Inputs Row Grid Layout */
.ih-nameservers-box .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
}

.ih-nameservers-box [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.ih-nameservers-box .ih-ns-input {
    width: 100% !important;
    height: 46px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
      font-weight: 600;
    color: #14376f !important;
}

.ih-nameservers-box .ih-ns-input:focus {
    border-color: #0b2a63 !important;
    box-shadow: 0 0 0 3px rgba(11, 42, 99, 0.1) !important;
    outline: none !important;
}



/* =========================================================
   HOSTING ITEM HORIZONTAL COMPACT LAYOUT (NO DEAD SPACE)
   ========================================================= */

/* 1. Review Item Parent Row Layout */
.onepage-review-item.hosting-review-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 22px 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    width: 100% !important;
}

/* 2. Left Info Container (Plan & Domain) */
.onepage-review-item.hosting-review-item .onepage-review-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Hosting Plan Label */
.onepage-review-item.hosting-review-item .onepage-review-label {
    font-size: 18px !important;
      font-weight: 600;
    text-transform: uppercase !important;
    color: #0a7f26 !important;
    letter-spacing: 0.5px !important;
}

/* Plan Name + Billing Cycle Inline on Line 1 */
.onepage-review-item.hosting-review-item .onepage-review-name {
    font-size: 18px !important;
      font-weight: 600;
    color: #14376f !important;
    display: inline-block !important;
    margin-right: 8px !important;
}

.onepage-review-item.hosting-review-item .onepage-review-meta {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    display: inline-block !important;
}

/* Line 2: "Domain: xxxxx.com" Tag Format */
.onepage-review-item.hosting-review-item .onepage-review-domain {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13.5px !important;
      font-weight: 600;
    color: #1e293b !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    width: fit-content !important;
    margin-top: 4px !important;
}

.onepage-review-item.hosting-review-item .onepage-review-domain::before {
    content: "Domain: " !important;
    color: #64748b !important;
    font-weight: 500 !important;
    margin-right: 4px !important;
}

/* 3. Middle Action Buttons + Far Right Price Alignment */
.onepage-review-item.hosting-review-item .onepage-review-price {
    display: flex !important;
    flex-direction: row-reverse !important; /* Price on far right, Buttons in middle */
    align-items: center !important;
    gap: 16px !important;
    flex: 0 0 auto !important;
    text-align: right !important;
}

/* Price Display Formatting */
.onepage-review-item.hosting-review-item .onepage-review-price > strong {
    font-size: 18px !important;
      font-weight: 600;
    color: #14376f !important;
    white-space: nowrap !important;
    margin-left: 10px !important;
}

/* Hide duplicate billing cycle text under price */
.onepage-review-item.hosting-review-item .onepage-review-price > span {
    display: none !important;
}

/* Edit & Remove Buttons as Side-by-Side Pills in Middle Area */
.onepage-review-item.hosting-review-item .btn-edit-hosting-domain,
.onepage-review-item.hosting-review-item .btn-remove-hosting-plan {
    margin-top: 0 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
      font-weight: 600;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s ease-in-out !important;
}

/* Edit Domain Button (Blue Pill) */
.onepage-review-item.hosting-review-item .btn-edit-hosting-domain {
    background: #edf4ff !important;
    color: #1768e5 !important;
    border: 1px solid #bcdcff !important;
}

.onepage-review-item.hosting-review-item .btn-edit-hosting-domain:hover {
    background: #1768e5 !important;
    color: #ffffff !important;
}

/* Remove Button (Red Pill) */
.onepage-review-item.hosting-review-item .btn-remove-hosting-plan {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}

.onepage-review-item.hosting-review-item .btn-remove-hosting-plan:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* Mobile Responsiveness Protection */
@media (max-width: 768px) {
    .onepage-review-item.hosting-review-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .onepage-review-item.hosting-review-item .onepage-review-price {
        flex-direction: wrap !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
}


/* =========================================================
   DOMAIN REGISTRATION & RENEWAL INLINE BUTTON LAYOUT
   ========================================================= */

/* Review item row flex alignment */
.onepage-review-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    width: 100% !important;
}

/* Price & Button Container (Price far right, Remove button in middle) */
.onepage-review-item .onepage-review-price {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 0 0 auto !important;
    text-align: right !important;
}

.onepage-review-item .onepage-review-price > strong {
    font-size: 18px !important;
      font-weight: 600;
    color: #14376f !important;
}

.onepage-review-item .onepage-review-price > span {
    font-size: 13px !important;
    color: #64748b !important;
    margin-right: 4px !important;
}

/* Red Pill Button Styling for Domain Remove Buttons */
.btn-remove-domain-registration,
.btn-remove-domain-renewal {
    margin-top: 0 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
      font-weight: 600;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-remove-domain-registration:hover,
.btn-remove-domain-renewal:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* Mobile Safety */
@media (max-width: 768px) {
    .onepage-review-item .onepage-review-price {
        flex-direction: wrap !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
}

/* =========================================================
   ULTIMATE ICON VISIBILITY & MOBILE COLOR FIX
========================================================= */

/* 1. Desktop - Notification & Cart Icons (Dark Blue) */
html body header.site-header .cart-link i,
html body header.site-header #notificationMenu i,
html body header.site-header.header-scrolled .cart-link i,
html body header.site-header.header-scrolled #notificationMenu i {
    color: #0b2a63 !important;
    filter: none !important;
    -webkit-filter: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. Desktop Hover - Notification & Cart Icons (White on Green background) */
html body header.site-header #notificationMenu:hover i,
html body header.site-header #notificationMenu.show i,
html body header.site-header.header-scrolled #notificationMenu:hover i,
html body header.site-header.header-scrolled #notificationMenu.show i {
    color: #0b2a63 !important;
}

/* 3. Desktop - Home Dashboard Icon (Green Button, White Icon) */
html body header.site-header .header-dashboard-icon,
html body header.site-header.header-scrolled .header-dashboard-icon {
    background-color: #0a7f26 !important; 
    border: 1px solid #0a7f26 !important;
    border-radius: 10px !important;
}
html body header.site-header .header-dashboard-icon i,
html body header.site-header.header-scrolled .header-dashboard-icon i {
    color: #ffffff !important;
    filter: none !important;
    -webkit-filter: none !important;
}
html body header.site-header .header-dashboard-icon:hover {
    background-color: #126d31 !important; /* Darker green on hover */
    border-color: #126d31 !important;
}

/* 4. Mobile Drawer - Force White Icons & Remove Black Filters */
@media (max-width: 991.98px) {
    /* Hamburger Menu Icon (Dark Blue) */
    html body header.site-header .navbar-toggler-icon,
    html body header.site-header.header-scrolled .navbar-toggler-icon {
        filter: invert(14%) sepia(50%) saturate(2971%) hue-rotate(207deg) brightness(95%) contrast(96%) !important;
        -webkit-filter: invert(14%) sepia(50%) saturate(2971%) hue-rotate(207deg) brightness(95%) contrast(96%) !important;
    }

    /* Mobile Drawer Icons - White */
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper a.cart-link i,
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper a#notificationMenu i,
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper a.header-dashboard-icon i {
        color: #ffffff !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    /* Mobile Drawer Button Backgrounds - Transparent White */
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper a.cart-link,
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper a#notificationMenu,
    html body header.site-header div.navbar-collapse div.mobile-actions-wrapper a.header-dashboard-icon {
        background-color: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
}