/*
======================================================
TOOLMINT PREMIUM CALCULATOR UI
======================================================
*/

:root{

--primary:#6C3BFF;
--secondary:#8B5CF6;
--accent:#A855F7;

--bg:#f7f8ff;
--white:#fff;

--text:#111827;
--muted:#6b7280;

--border:#ececf5;

--radius:22px;

--shadow:0 20px 60px rgba(108,59,255,.12);

}

body{

background:var(--bg);

}

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

.tm-page-hero{

padding:90px 0 60px;

background:

linear-gradient(

135deg,

#6C3BFF,

#8B5CF6,

#A855F7

);

color:#fff;

margin-bottom:50px;

}

.tm-breadcrumb{

display:flex;

gap:10px;

align-items:center;

font-size:15px;

opacity:.9;

margin-bottom:25px;

}

.tm-breadcrumb a{

color:#fff;

}

.tm-page-hero h1{

font-size:52px;

font-weight:900;

margin-bottom:18px;

}

.tm-page-hero p{

font-size:20px;

max-width:700px;

opacity:.95;

}

/*==========================
LAYOUT
==========================*/

/* Keep the calculator wide enough for two equal desktop cards. */
.tm-container{
    width:100%;
    max-width:1200px;
    box-sizing:border-box;
    margin-left:auto;
    margin-right:auto;
}

.tm-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:35px;
    align-items:start;
    margin-bottom:40px;
}


.tm-left{

min-width:0;

}

.tm-right{

position:sticky;

top:25px;

}

/*==========================
CARD
==========================*/

.tm-card{

background:#fff;

border-radius:24px;

padding:32px;

box-shadow:var(--shadow);

margin-bottom:30px;

border:1px solid #eee;

}

.tm-form-card{

padding:35px;

}

/*==========================
SUMMARY
==========================*/

.tm-summary-card{

background:#fff;

padding:30px;

border-radius:24px;

box-shadow:var(--shadow);

border:1px solid #eee;

}

.tm-summary-status{

padding:16px;

border-radius:14px;

text-align:center;

color:#fff;

font-size:20px;

font-weight:800;

margin-bottom:25px;

}

.tm-total{

font-size:54px;

font-weight:900;

text-align:center;

color:#6C3BFF;

margin-bottom:10px;

}

.tm-summary-card>p{

text-align:center;

color:#777;

margin-bottom:28px;

}

.tm-summary-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

}

.tm-summary-grid div{

background:#f7f7fd;

padding:18px;

border-radius:16px;

}

.tm-summary-grid label{

display:block;

font-size:13px;

color:#777;

margin-bottom:8px;

}

.tm-summary-grid strong{

font-size:18px;

}

/*==========================
TABLE
==========================*/

.tm-table{

width:100%;

border-collapse:collapse;

}

.tm-table th{

background:#6C3BFF;

color:#fff;

padding:16px;

}

.tm-table td{

padding:15px;

border-bottom:1px solid #eee;

}

.tm-table tr:hover{

background:#faf9ff;

}

/*==========================
INFO
==========================*/

.tm-info-box h2,
.tm-breakdown-card h2,
.tm-related h2,
.tm-faq h2{

margin-bottom:20px;

font-size:30px;

}

.tm-info-box p{

line-height:1.9;

color:#666;

}

.tm-info-box pre{

background:#f5f5ff;

padding:20px;

border-radius:15px;

overflow:auto;

}

/*==========================
FAQ
==========================*/

.tm-faq-item{

padding:20px 0;

border-bottom:1px solid #eee;

}

.tm-faq-item h3{

margin-bottom:12px;

font-size:20px;

}

.tm-faq-item p{

color:#666;

line-height:1.8;

}

/*==========================
RELATED
==========================*/

.tm-related-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}

.tm-related-grid a{

display:flex;

justify-content:center;

align-items:center;

padding:18px;

background:#f7f7fd;

border-radius:15px;

font-weight:700;

color:#6C3BFF;

transition:.35s;

}

.tm-related-grid a:hover{

background:#6C3BFF;

color:#fff;

}

/*==========================
SOURCE
==========================*/

.tm-source{

display:flex;

justify-content:space-between;

gap:30px;

}

.tm-source strong{

display:block;

margin-bottom:8px;

}

/*==========================
ALERT
==========================*/

.tm-alert{

padding:18px;

background:#ef4444;

color:#fff;

border-radius:15px;

margin-top:25px;

}

/*==========================
BUTTON
==========================*/

.tm-btn,
button,
input[type=submit]{

background:

linear-gradient(

135deg,

#6C3BFF,

#A855F7

);

color:#fff;

border:none;

border-radius:999px;

padding:16px 34px;

font-weight:700;

cursor:pointer;

transition:.35s;

}

.tm-btn:hover,
button:hover{

transform:translateY(-3px);

box-shadow:0 20px 45px rgba(108,59,255,.3);

}


/* =========================
   Mobile Responsive Fix
========================= */

@media (max-width:768px){

.tm-layout{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.tm-left,
.tm-right{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
}

.tm-summary-card{
    width:100%;
}

.tm-form-card{
    width:100%;
}

.tm-table{
    display:block;
    overflow-x:auto;
}

.tm-related-grid{
    grid-template-columns:1fr;
}

.tm-summary-grid{
    grid-template-columns:1fr 1fr;
}

}
/* Fixed result card + units strip: update only after Calculate Bill. */
@media (min-width:1201px){
    /* Desktop balance: wider input card, slightly narrower result card. */
    .tm-layout{
        grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    }
}

.tm-left,
.tm-right{
    min-width:0;
    width:100%;
    box-sizing:border-box;
}

.tm-summary-card{
    box-sizing:border-box;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
}


.tm-units-result{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100%;
    height:56px;
    min-height:56px;
    box-sizing:border-box;
    text-align:center;
    font-weight:800 !important;
    font-size:16px;
    line-height:1.45;
    padding:8px 16px;
    margin:0 0 18px;
    color:#333;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.tm-summary-grid > div{
    min-width:0;
    overflow:hidden;
}

.tm-summary-grid strong,
.tm-summary-grid label{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
}