/* =============================================================================
   GLOOBLES TOOL BOX — styles.css
   Global styles for all views. Edit here, changes apply everywhere.
   Sections: RESET · VARIABLES · NAV · TABS · VIEWS · HOME · TOOLS GRID
             OFFER BUILDER · CALENDAR · INVOICE · PRICE CALC · FOOTER · MOBILE
   ============================================================================= */

*{box-sizing:border-box;margin:0;padding:0}
@font-face{font-family:'GTSuper';src:url('fonts/GTSuperText-Medium.ttf') format('truetype');font-weight:500;}
@font-face{font-family:'GTAmerica';src:url('fonts/GTAmerica-Regular.ttf') format('truetype');font-weight:400;}
@font-face{font-family:'GTAmericaMono';src:url('fonts/GTAmericaMono-Regular.ttf') format('truetype');font-weight:400;}
:root{
  --black:#0e0e0e;--white:#fafaf8;--gray:#f2f1ee;--border:#e0ddd8;
  --text2:#888580;--green:#25D366;--gd:#128C7E;--gt:#075E54;--gbg:#ECE5DD;
  --mono:'DM Mono',monospace;--serif:'DM Serif Display',serif;
  --bg:#ffffff;--bg2:#f5f4f0;--text:#1a1a1a;--radius:10px;--radius-sm:6px;
}
html{scroll-behavior:smooth}
body{font-family:var(--mono);background:var(--white);color:var(--black);min-height:100vh;}

/* NAV */
nav{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 2.5rem;border-bottom:0.5px solid var(--border);position:sticky;top:0;background:var(--white);z-index:200;}
.nav-logo{font-family:'GTSuper',serif;font-size:15px;font-weight:500;letter-spacing:0;color:var(--black);text-decoration:none;cursor:pointer;}
.nav-tag{font-size:11px;color:var(--text2);letter-spacing:.08em;}

/* TABS */
.tabs{display:flex;gap:0;border-bottom:0.5px solid var(--border);padding:0 2.5rem;background:var(--white);position:sticky;top:var(--nav-h);z-index:190;}
.tab{font-family:var(--mono);font-size:12px;padding:10px 18px;cursor:pointer;color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-0.5px;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;letter-spacing:.03em;}
.tab:hover{color:var(--black);}
.tab.active{color:var(--black);border-bottom-color:var(--black);}
.tab-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:middle;position:relative;top:-1px;}
.tab-dot.off{background:var(--border);}
.tab-close{margin-left:7px;opacity:.35;font-size:10px;line-height:1;cursor:pointer;padding:0 1px;vertical-align:middle;}
.tab-close:hover{opacity:1;}
.qs-wrap{position:relative;margin-left:auto;}
.qs-tab{border-left:0.5px solid var(--border)!important;border-radius:0;padding-right:0;}
.qs-tab.qs-open{color:var(--black);}
.qs-menu{display:none;position:absolute;top:calc(100% + 1px);right:0;background:var(--white);border:0.5px solid var(--border);border-radius:var(--radius-sm);min-width:180px;box-shadow:0 4px 16px rgba(0,0,0,.08);z-index:300;overflow:hidden;}
.qs-menu.open{display:block;}
.qs-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 16px;font-family:var(--mono);font-size:12px;color:var(--text2);background:none;border:none;cursor:pointer;text-align:left;letter-spacing:.03em;transition:background .12s,color .12s;}
.qs-item:hover{background:var(--gray);color:var(--black);}

/* VIEWS */
.view{display:none;min-height:calc(100vh - 100px);}
.view.active{display:block;}

/* HOME */
.hero{padding:4rem 2.5rem 3rem;border-bottom:0.5px solid var(--border);max-width:860px;}
.hero-label{font-size:11px;color:var(--text2);letter-spacing:.1em;text-transform:lowercase;margin-bottom:1rem;}
.hero h1{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:400;font-style:italic;line-height:1.15;color:var(--black);margin-bottom:.9rem;}
.hero p{font-size:12px;color:var(--text2);line-height:1.75;max-width:440px;}
.section{padding:2.5rem 2.5rem;}
.section-label{font-size:11px;color:var(--text2);letter-spacing:.1em;text-transform:lowercase;margin-bottom:1.5rem;display:flex;align-items:center;gap:12px;}
.section-label::after{content:'';flex:1;height:0.5px;background:var(--border);}
.tools-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;border:0.5px solid var(--border);border-radius:4px;overflow:hidden;background:var(--border);}
.tool-empty{background:var(--border);}
.tool-card{background:var(--white);padding:1.5rem;cursor:pointer;transition:background .15s;display:flex;flex-direction:column;align-items:flex-start;position:relative;border:none;text-align:left;width:100%;font-family:var(--mono);}
.tool-card:hover{background:var(--gray);}
.tool-card.coming-soon{cursor:default;opacity:.5;}
.tool-card.coming-soon:hover{background:var(--white);}
.tool-tag{font-size:10px;letter-spacing:.1em;color:var(--text2);text-transform:lowercase;margin-bottom:.6rem;display:flex;align-items:center;gap:6px;}
.tool-dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0;}
.tool-dot.off{background:var(--border);}
.tool-name{font-family:var(--serif);font-size:1.15rem;font-style:italic;color:var(--black);margin-bottom:.4rem;line-height:1.2;}
.tool-desc{font-size:11px;color:var(--text2);line-height:1.6;}
.tool-arrow{position:absolute;bottom:1.5rem;right:1.5rem;font-size:13px;color:var(--border);transition:color .15s,transform .15s;}
.tool-card:not(.coming-soon):hover .tool-arrow{color:var(--gd);transform:translate(2px,-2px);}
.soon-badge{position:absolute;top:1.5rem;right:1.5rem;font-size:9px;letter-spacing:.08em;color:var(--text2);border:0.5px solid var(--border);border-radius:2px;padding:2px 6px;text-transform:lowercase;}

/* OFFER BUILDER */
.ob-wrap{padding:1.5rem 2.5rem;}
.ob-title{font-size:13px;font-weight:500;color:var(--gt);margin-bottom:1.25rem;letter-spacing:.01em;}
.app{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1200px;}
.panel{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);padding:1.25rem;}
.ptitle{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:1rem;}
.sec{margin-bottom:1rem;}
.lbl{font-size:12px;color:var(--text2);margin-bottom:5px;}
input[type=text],input[type=number],textarea{width:100%;padding:7px 10px;font-size:13px;border:0.5px solid #ccc;border-radius:var(--radius-sm);background:#fff;color:var(--text);font-family:inherit;}
input:focus,textarea:focus{outline:none;border-color:var(--gd);}
textarea{resize:vertical;min-height:52px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.hotel-block{border:0.5px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;overflow:hidden;}
.hotel-hdr{background:var(--bg2);padding:7px 10px;display:flex;align-items:center;gap:6px;position:relative;}
.hotel-hdr input{background:transparent;border:none;font-size:13px;font-weight:500;color:var(--text);flex:1;padding:0;}
.hotel-hdr input:focus{outline:none;border-bottom:1px solid #ccc;}
.hotel-body{padding:8px 10px;}
.col-hds{display:grid;grid-template-columns:1fr 75px 20px;gap:5px;margin-bottom:3px;}
.col-h{font-size:10px;color:var(--text2);}
.room-row{display:grid;grid-template-columns:1fr 75px 20px;gap:5px;align-items:center;margin-bottom:5px;}
.room-row input{font-size:12px;padding:4px 7px;}
.delbtn{background:none;border:none;color:var(--text2);cursor:pointer;font-size:15px;line-height:1;padding:0;}
.delbtn:hover{color:#e24b4a;}
.add-room{width:100%;padding:4px;font-size:11px;background:none;border:0.5px dashed var(--green);border-radius:4px;color:var(--gd);cursor:pointer;margin-top:2px;}
.add-room:hover{background:#e9f9f1;}
.add-hotel{display:block;width:100%;padding:7px;font-size:12px;background:none;border:0.5px dashed #ccc;border-radius:var(--radius-sm);color:var(--text2);cursor:pointer;margin-top:4px;}
.add-hotel:hover{background:var(--bg2);}
.cal-wrap{position:relative;}
.cal-wrap input{padding-right:26px;cursor:pointer;}
.cal-ico{position:absolute;right:7px;top:50%;transform:translateY(-50%);font-size:13px;pointer-events:none;}
.cal-pop{display:none;position:absolute;top:32px;left:0;z-index:200;background:#fff;border:0.5px solid #ccc;border-radius:var(--radius-sm);padding:8px;box-shadow:0 4px 14px rgba(0,0,0,.12);min-width:230px;}
.cal-pop.open{display:block;}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.cal-nav button{background:none;border:none;cursor:pointer;font-size:15px;color:var(--text2);padding:2px 5px;}
.cal-nav span{font-size:12px;font-weight:500;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;}
.cdn{font-size:9px;color:var(--text2);text-align:center;padding:2px 0;}
.cd{font-size:11px;text-align:center;padding:4px 2px;border-radius:3px;cursor:pointer;color:var(--text);}
.cd:hover{background:var(--bg2);}
.cd.sel{background:var(--green);color:white;}
.cd.td{font-weight:500;color:var(--gd);}
.cd.em{cursor:default;}
.gen-btn{width:100%;padding:10px;font-size:14px;font-weight:500;background:var(--green);color:white;border:none;border-radius:var(--radius-sm);cursor:pointer;margin-top:4px;}
.gen-btn:hover{background:var(--gd);}
.wa-phone{background:var(--gbg);border-radius:10px;overflow:hidden;margin-bottom:10px;}
.wa-top{background:var(--gt);color:white;padding:9px 12px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;}
.wa-av{width:26px;height:26px;border-radius:50%;background:#A8D5CC;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--gt);flex-shrink:0;}
.wa-msgs{padding:10px;max-height:520px;overflow-y:auto;}
.wa-bubble{background:white;border-radius:0 10px 10px 10px;padding:9px 12px;font-size:13px;line-height:1.55;color:#111;white-space:pre-wrap;box-shadow:0 1px 2px rgba(0,0,0,.1);position:relative;margin-bottom:4px;}
.wa-bubble::before{content:'';position:absolute;left:-6px;top:0;border:6px solid transparent;border-right-color:white;border-top:none;}
.wa-time{font-size:10px;color:#9E9E9E;text-align:right;margin-top:4px;}
.copy-btn{width:100%;padding:8px;font-size:13px;background:var(--bg2);color:var(--text);border:0.5px solid #ccc;border-radius:var(--radius-sm);cursor:pointer;}
.copy-btn:hover{background:#eceae4;}
.empty-state{text-align:center;font-size:12px;color:#9E9E9E;padding:30px 0;}
.toggle-group{display:flex;gap:6px;margin-bottom:10px;}
.tog-btn{flex:1;padding:6px 10px;font-size:12px;font-weight:500;border:0.5px solid #ccc;border-radius:var(--radius-sm);background:#fff;color:var(--text2);cursor:pointer;transition:all .15s;}
.tog-btn.active{background:var(--gd);color:white;border-color:var(--gd);}
.cxl-global{display:none;}
.cxl-global.show{display:block;}
.cxl-per{display:none;}
.cxl-per.show{display:block;}
.cxl-hotel-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.cxl-hotel-name{font-size:12px;font-weight:500;color:var(--text);min-width:110px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cxl-hotel-row textarea{min-height:36px;font-size:12px;padding:5px 8px;}

/* NAV BUTTONS (back / home) */
.view-nav{display:flex;align-items:center;gap:8px;margin-bottom:1.5rem;}
.view-nav-btn{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:var(--text2);background:none;border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:5px 10px;cursor:pointer;transition:all .15s;letter-spacing:.02em;}
.view-nav-btn:hover{color:var(--black);border-color:var(--black);}
.view-nav-btn svg{width:11px;height:11px;flex-shrink:0;}

/* MOBILE */
@media(max-width:768px){
  .app{grid-template-columns:1fr;}
  .ob-wrap{padding:1rem;}
  nav{padding:.9rem 1.2rem;}
  .tabs{padding:0 1rem;overflow-x:auto;}
  .hero{padding:2.5rem 1.2rem 2rem;}
  .section{padding:1.5rem 1.2rem;}
  .row2{grid-template-columns:1fr 1fr;}
  .calc-grid{grid-template-columns:1fr 1fr !important;}
  .tools-grid{grid-template-columns:repeat(2,1fr);}
  .tool-empty{display:none;}
}

/* INVOICE GENERATOR */
.inv-item-hdr{display:grid;grid-template-columns:1fr 48px 88px 78px 20px;gap:6px;margin-bottom:4px;}
.inv-item-row{display:grid;grid-template-columns:1fr 48px 88px 78px 20px;gap:6px;align-items:center;margin-bottom:5px;}
.inv-from-box{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:11px;color:var(--text2);line-height:1.8;}
.inv-from-box strong{color:var(--black);font-size:12px;display:block;margin-bottom:1px;}
.inv-amt-cell{font-size:12px;padding:5px 8px;background:var(--bg2);border-radius:var(--radius-sm);text-align:right;white-space:nowrap;}
.inv-totals{background:var(--bg2);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:16px;}
.inv-total-row{display:flex;justify-content:space-between;font-size:12px;padding:2px 0;}
.inv-total-row.grand{font-weight:600;font-size:14px;border-top:0.5px solid var(--border);margin-top:6px;padding-top:8px;}
.inv-preview-wrap{background:#fff;border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:24px;flex:1;overflow-y:auto;font-size:10px;line-height:1.7;min-height:460px;}
.prev-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;}
.prev-logo{font-size:16px;font-weight:600;letter-spacing:.02em;}
.prev-meta{text-align:right;font-size:10px;color:var(--text2);line-height:1.8;}
.prev-parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;}
.prev-party-label{font-size:9px;color:#aaa;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;}
.prev-party-name{font-size:11px;font-weight:600;color:var(--black);margin-bottom:2px;}
.prev-party-addr{font-size:10px;color:var(--text2);line-height:1.7;}
.prev-items-hdr{display:grid;grid-template-columns:1fr 40px 80px 70px;gap:8px;font-size:9px;color:#aaa;text-transform:uppercase;letter-spacing:.08em;border-bottom:0.5px solid var(--border);padding-bottom:6px;margin-bottom:6px;}
.prev-item-row{display:grid;grid-template-columns:1fr 40px 80px 70px;gap:8px;font-size:10px;padding:4px 0;border-bottom:0.5px solid var(--bg2);}
.prev-totals{margin-top:12px;margin-left:auto;width:200px;}
.prev-total-row{display:flex;justify-content:space-between;font-size:10px;padding:3px 0;}
.prev-total-row.grand{font-weight:600;font-size:12px;border-top:0.5px solid var(--border);margin-top:6px;padding-top:6px;}
.prev-footer{margin-top:32px;padding-top:12px;border-top:0.5px solid var(--border);font-size:9px;color:#aaa;text-align:center;}

/* FOOTER */
footer{border-top:0.5px solid var(--border);padding:1.25rem 2.5rem;display:flex;align-items:center;justify-content:space-between;}
footer span{font-size:11px;color:var(--text2);}