/* ==========================================================================
   Comfort Life - modern UI layer (presentation only, no logic)
   Loaded after style.css / custom.css. Scoped to shared booking + account
   components: summary widget, contact box, user panel, welcome banner.
   ========================================================================== */
:root {
    --cl-navy: #0B1835;
    --cl-blue: #123B91;
    --cl-orange: #F47B20;
    --cl-bg: #F7F9FC;
    --cl-card: #FFFFFF;
    --cl-text: #14213D;
    --cl-muted: #64748B;
    --cl-border: #E5EAF1;
    --cl-radius: 16px;
    --cl-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12);
}

/* ---------- Summary Details (booking flow + checkout) ---------- */
.summary-widget.widget {
    background: var(--cl-card) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    box-shadow: var(--cl-shadow) !important;
    overflow: hidden;
    padding: 0 !important;
}
.summary-widget .widget_title {
    background: transparent !important;
    color: var(--cl-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 18px 20px 14px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--cl-border) !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    border-radius: 0 !important;
}
.summary-widget .widget_title::before {
    content: "" !important;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
    background: #FFF4EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F47B20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E") center / 16px no-repeat;
    position: static !important;
    display: inline-block !important;
}
.summary-widget .widget_title::after,
.summary-widget .widget_title i,
.summary-widget .widget_title img { display: none !important; }
.summary-widget .widget_content { padding: 8px 20px 4px !important; background: transparent !important; }
.summary-widget .widget_content ul { margin: 0 !important; padding: 0 !important; }
.summary-widget .widget_content li {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed var(--cl-border) !important;
    background: transparent !important;
    font-size: 14px;
    color: var(--cl-text);
}
.summary-widget .widget_content li:last-child { border-bottom: 0 !important; }
.summary-widget .widget_content li::before,
.summary-widget .widget_content li::after { display: none !important; }
.summary-widget .widget_content li.text-muted { display: block !important; text-align: center; color: var(--cl-muted) !important; padding: 18px 0 !important; }
.summary-widget .widget_content li .label,
.summary-widget .widget_content li p { margin: 0 !important; color: var(--cl-text); font-size: 14px; line-height: 1.45; }
.summary-widget .widget_content li .label { color: #334155; font-weight: 500; flex: 1 1 60%; min-width: 0; }
.summary-widget .widget_content li .price { font-weight: 700; color: var(--cl-text); white-space: nowrap; }
.summary-widget .total-section,
.summary-widget .widget_content li.total-item,
.summary-widget .widget_content li:has(#grand-total),
.summary-widget .widget_content li:has(#total-amount) {
    margin: 0 20px 18px !important;
}
.summary-widget .total-section {
    background: #FFF8F1;
    border: 1px solid #FBE3CC !important;
    border-radius: 12px;
    padding: 14px 16px !important;
}
.summary-widget .total-section span:first-child { color: var(--cl-text) !important; font-size: 15px !important; }
.summary-widget #total-amount { color: var(--cl-orange) !important; font-size: 20px !important; font-weight: 800 !important; }

/* ---------- Let's Contact with us (contact-box2) ---------- */
.contact-box2 {
    background: var(--cl-card) !important;
    background-image: none !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    box-shadow: var(--cl-shadow) !important;
    padding: 20px !important;
    margin-top: 20px !important;
    text-align: left !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.contact-box2::before, .contact-box2::after { display: none !important; }
.contact-box2 .shape-mockup { display: none !important; }
.contact-box2 .portfolio-title {
    grid-column: 1 / -1;
    color: var(--cl-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 14px !important;
    line-height: 1.3 !important;
    text-align: left !important;
}
.contact-box2 .portfolio-title br { display: none; }
.contact-box2 .icon-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    border-radius: 14px !important;
    background: #FFF4EA !important;
    border: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}
.contact-box2 .icon-btn::before, .contact-box2 .icon-btn::after { display: none !important; }
.contact-box2 .icon-btn img {
    width: 22px !important;
    height: 22px !important;
    filter: invert(55%) sepia(77%) saturate(2200%) hue-rotate(350deg) brightness(98%) contrast(94%);
}
.contact-box2 .contact-content { margin: 0 !important; padding: 0 !important; text-align: left !important; }
.contact-box2 .contact-title { color: var(--cl-muted) !important; font-size: 13px !important; font-weight: 500 !important; margin: 0 0 2px !important; text-transform: none !important; }
.contact-box2 .contact-text { margin: 0 !important; }
.contact-box2 .contact-text a { color: var(--cl-blue) !important; font-size: 17px !important; font-weight: 800 !important; letter-spacing: .01em; }
.contact-box2 .contact-text a:hover { color: var(--cl-orange) !important; }

/* ---------- Customer account: welcome banner + User Panel ---------- */
.portfolio-Details .serv-info-section {
    background: var(--cl-card) !important;
    background-image: none !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    box-shadow: var(--cl-shadow) !important;
    padding: 18px 22px !important;
    margin-bottom: 24px !important;
}
.portfolio-Details .serv-info-section::before, .portfolio-Details .serv-info-section::after { display: none !important; }
.portfolio-Details .serv-info-section > .d-flex { justify-content: flex-start !important; gap: 14px; }
.portfolio-Details .serv-info-section .portfolio-img img { width: 52px !important; height: 52px !important; border-radius: 50% !important; object-fit: cover; border: 2px solid #FFF4EA; }
.portfolio-Details .serv-info-section p { color: var(--cl-muted) !important; font-size: 13px; margin: 0 !important; }
.portfolio-Details .serv-info-section .portfolio-title { color: var(--cl-text) !important; font-size: 20px !important; font-weight: 700 !important; margin: 0 !important; }

.userpanel-widget.widget {
    background: var(--cl-card) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    box-shadow: var(--cl-shadow) !important;
    padding: 0 !important;
    overflow: hidden;
}
.userpanel-widget .widget_title {
    background: transparent !important;
    color: var(--cl-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 16px 20px 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.userpanel-widget .widget_title::before, .userpanel-widget .widget_title::after,
.userpanel-widget .widget_title i, .userpanel-widget .widget_title img { display: none !important; }
.userpanel-widget .widget_content { padding: 4px 10px 12px !important; background: transparent !important; }
.userpanel-widget .widget_content ul { margin: 0 !important; padding: 0 !important; }
.userpanel-widget .widget_content li {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 !important;
    margin: 2px 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.userpanel-widget .widget_content li::before, .userpanel-widget .widget_content li::after { display: none !important; }
.userpanel-widget .dot-shape { display: none !important; }
.userpanel-widget .widget_content li a {
    flex: 1;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 11px 12px !important;
    border-radius: 10px;
    color: #334155 !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    background: transparent !important;
    transition: background .15s, color .15s;
}
.userpanel-widget .widget_content li a i { font-size: 11px; color: #94A3B8; width: 14px; transition: color .15s; }
.userpanel-widget .widget_content li a:hover { background: var(--cl-bg) !important; color: var(--cl-blue) !important; }
.userpanel-widget .widget_content li a.active { background: #FFF4EA !important; color: var(--cl-orange) !important; }
.userpanel-widget .widget_content li a.active i, .userpanel-widget .widget_content li a:hover i { color: var(--cl-orange); }
.userpanel-widget .widget_content li span {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #EEF2F7 !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.userpanel-widget .widget_content li a.active + span { background: #FDE3CC !important; color: var(--cl-orange) !important; }
.portfolio-Details > .shape-mockup { display: none !important; }

@media (max-width: 991px) {
    .contact-box2 { margin-bottom: 8px !important; }
}
/* summary + contact fine-tuning */
.summary-widget .widget_content { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.summary-widget .widget_content ul { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.summary-widget .widget_content li { flex-wrap: nowrap; align-items: center; }
.summary-widget .remove-item-btn { position: static !important; transform: none !important; inset: auto !important; width: 26px !important; height: 26px !important; min-width: 26px; padding: 0 !important; margin: 0 !important; border-radius: 8px !important; background: #FEF2F2 !important; border: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 26px; }
.summary-widget .remove-item-btn i { color: #DC2626 !important; font-size: 12px !important; }
.summary-widget .remove-item-btn:hover { background: #FEE2E2 !important; }
.contact-box2 .portfolio-title { max-width: none !important; width: auto !important; }

/* user panel fine-tuning */
.userpanel-widget .widget_content li a { border: 0 !important; }
.userpanel-widget .widget_content li a i { position: static !important; top: auto !important; left: auto !important; transform: none !important; margin: 0 !important; }
.userpanel-widget.widget, .summary-widget.widget { border-bottom-width: 1px !important; }