body {margin:0;font-family:sans-serif,'Bruno Ace SC','Uncial Antiqua','Fugaz One','Alkatra';background-color:#2b2b2b;color:#EFEFEF;}
    header {position: sticky; background:rgba(43,43,43,0.95);display:flex;justify-content:space-between;align-items:center;padding:15px;top:0;z-index:1000;transition:all 0.3s ease;box-shadow:0 6px 15px rgba(0,0,0,0.35);}
    header.shrink {padding:8px 50px;background:rgba(30,30,30,0.98);}
    header img {height:64px;width:208px;overflow:hidden;object-fit:cover;transition:all 0.3s ease;}
    header.shrink img {height:50px;width:160px;}
    .builder-intro {display: flex; flex-direction: column; text-align:center;margin:40px 20px;}
    .builder-intro h1 {font-family:'Fugaz One',sans-serif;font-size:42px;color:#EFEFEF;margin-bottom:15px;}
    .builder-intro p {font-family:'Alkatra',sans-serif;font-size:18px;color:#DCC2A8;max-width:700px;margin:0 auto;line-height:1.5;}
    nav {display:flex;gap:20px;}
    nav a {color:#efefef;font-weight:bold;font-size:24px;text-decoration:none;position:relative;}
    nav a::after {content:'';position:absolute;width:0;height:2px;left:0;bottom:-4px;background:#a0765b;opacity:0.05;transition:width 0.6s ease, opacity 0.3s ease 0.05s;}
    nav a:hover::after,nav a.active.animate::after {width:100%;opacity:1;}
    .nav-links {display:flex;gap:20px;}
    .nav-btn {display:none;}
    #page-nav {display:flex;gap:0.5rem;padding:0.5rem 1rem;background:#2b2b2b;flex-wrap:wrap;align-items:center;overflow-x:auto;}
    .page-btn-wrapper {display:flex;align-items:center;margin-right:0.5rem;}
    .page-btn, .page-edit-btn, .main-btn, #toolbar button {display:flex;align-items:center;justify-content:center;border:none;border-radius:5px;padding:0.5rem 1rem;cursor:pointer;background:#8B5E3C;color:#fff;}
    /* workspace: container for stacked page canvases */
    #canvas-container {position:relative;margin:1rem;min-height:600px;background:transparent;border-radius:8px;overflow:visible;display:flex;flex-direction:column;gap:1rem;padding-bottom:1rem;}
    /* each page inside workspace */
    .page-canvas {background:#fff;border:2px dashed #ccc;border-radius:8px;overflow:hidden;display:block;padding:0;margin:0 0 1rem 0;}
    .page-inner-canvas {display:flex;flex-direction:column;}
    .canvas-section {position:relative;overflow:hidden;border-bottom:1px dashed rgba(0,0,0,0.3);background:transparent;}
    .canvas-section:last-child {border-bottom:none;}
    .section-label {position:absolute;top:4px;left:6px;font-size:12px;color:#000;opacity:0.14;font-style:italic;pointer-events:none;user-select:none;}
    .element {position:absolute;border:2px solid #a0765b;border-radius:5px;background:transparent;min-width:50px;min-height:30px;display:flex;flex-direction:column;transform-origin:center center;touch-action:none;}
    .element textarea {width:100%;height:100%;border:none;resize:none;background:transparent;font-size:1rem;outline:none;flex:1;overflow:auto;color:inherit;}
    .element img {width:100%;height:100%;object-fit:contain;flex:1;pointer-events:none;user-select:none;}
    .element .visual-btn, .element .feature-block {width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:5px;user-select:none;pointer-events:none;flex:1;}
    .element .visual-btn {background:#ccc;color:#333;}
    .element .feature-block {background:#ffe599;color:#333;}
    .handle {position:absolute;width:20px;height:20px;background:#a0765b;color:white;font-size:14px;font-weight:bold;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;user-select:none;}
    .handle.delete {top:-10px;left:-10px;}
    .handle.rotate {top:-10px;right:-10px;cursor:crosshair;}
    .handle.resize {bottom:-10px;right:-10px;cursor:se-resize;}
    #toolbar {position:absolute;top:6rem;background:#2b2b2b;padding:1rem;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,0.5);backdrop-filter:blur(10px);border:1px solid #444;z-index:1000;transition:all 0.3s ease;}
    #toolbar input,#toolbar select,#toolbar button {display:block;margin-bottom:0.6rem;width:160px;padding:0.55rem 0.8rem;border-radius:8px;border:none;background:linear-gradient(145deg,#3a3a3a,#2c2c2c);color:#f0f0f0;cursor:pointer;font-weight:500;transition:all 0.2s ease-in-out;box-shadow:0 4px 6px rgba(0,0,0,0.3);}
    #toolbar input:hover,#toolbar select:hover,#toolbar button:hover {background:linear-gradient(145deg,#4a4a4a,#353535);transform:translateY(-2px);box-shadow:0 6px 10px rgba(0,0,0,0.5);}
    #toolbar input[type=color] {width:160px;}
    /* --- New palette panel styles (added) --- */
    .bg-palette-panel {overflow:hidden;max-height:0;transition:max-height 220ms ease;display:flex;flex-wrap:wrap;gap:6px;padding:0 2px;margin-top:6px;}
    .bg-palette-panel.open {max-height:220px;padding:8px 2px;}
    .bg-palette-swatch {width:28px;height:28px;border-radius:6px;border:2px solid rgba(255,255,255,0.06);cursor:pointer;box-shadow:0 3px 6px rgba(0,0,0,0.25);}
    /* small helper for label spacing */
    .toolbar-group {margin-bottom:6px;}
    .site-footer {background-color:#5C4438;color:#F5F5F5;font-family:sans-serif;padding:40px 20px 5px;max-width:100%;}
    .footer-container {max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;text-align:left;}
    .footer-section h4 {margin-bottom:10px;font-size:16px;color:#313131;}
    .footer-section a {display:block;color:#F5F5F5;text-decoration:none;margin:5px 0;font-size:14px;}
    .footer-section a:hover {color:#2b2b2b;}
    .footer-logo img {width:160px;}
    .footer-contact p {margin:5px 0;font-size:14px;}
    .footer-social a img {width:25px;margin-right:10px;vertical-align:middle;}
    .footer-bottom {text-align:center;margin-top:30px;font-size:12px;color:#CCCCCC;}
    @media (max-width:768px) {nav a{font-size:16px;}.nav-links{max-height:0;overflow:hidden;flex-direction:column;gap:10px;background-color:#222;padding:0 10px;position:absolute;top:100%;right:0;width:auto;min-width:150px;z-index:1000;transition:max-height 0.4s ease,padding 0.4s ease;}.nav-links.open{max-height:500px;padding:10px;}.nav-btn{display:block;background:none;border:2px solid #efefef;color:#efefef;font-size:18px;padding:6px 12px;cursor:pointer;}.footer-container{flex-direction:column;align-items:center;text-align:center;}.footer-section{margin-bottom:20px;}}
  /* Media query only for header image */
@media (max-width:480px) {
  header img {
    width: 50%;
  }
}


#toolbar + .toolbar-group {
  display: none !important;
}

#extend-canvas,
body > #export-btn:not(#toolbar #export-btn) {
  display: none !important;
}


#toolbar {
  position: absolute; 
  right: 0px;
  bottom: 0px;
  width: 200px;
  height: fit-content;
  z-index: 2; 
}
.nav-links {
  display: flex;
  gap: 20px;
}

.nav-btn {
  display: none; 
}

@media (max-width: 768px) {
   
   nav a {
	  font-size: 16px;
	}
	
	nav {
    position: relative; 
  }

  .nav-links {
    max-height: 0;
    overflow: hidden;
    flex-direction: column;
    gap: 10px;
    background-color: #222;
    padding: 0 10px; 
    position: absolute;
    top: 100%;
    right: 0;
    width: auto;
	min-width: 150px;
    z-index: 1000;
    transition: max-height 0.4s ease, padding 0.4s ease;
  }

  .nav-links.open {
    max-height: 500px; 
    padding: 10px;     
  }

  .nav-btn {
    display: block;
    background: none;
    border: 2px solid #efefef;
    color: #efefef;
    font-size: 18px;
    padding: 6px 12px;
    cursor: pointer;
	}


}

@media (max-width: 480px) {
  header img {
   width: 50%;
  }
}

.quote-section {
    padding: 20px 20px 70px 20px;
    text-align: center;
    background-color: #313131;
    color: #EFEFEF;
	 scroll-margin-top: 90px;
}

.quote-section h2 {
    font-family: 'Fugaz One', sans-serif;
    font-size: 40px;
    margin: 50px 0 15px 0;
}

.quote-section .instructions {
    font-family: 'Alkatra', sans-serif;
    font-size: 16px;
    margin: 15px auto 30px auto;
    max-width: 700px;
    color: #DCC2A8;
}

.quote-section h3 {
    font-family: 'Bruno Ace SC', sans-serif;
    font-size: 28px;
    margin: 60px 0 15px 0;
}

.options-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

.option-card {
    background: radial-gradient(circle at top left, #5c4438, #7d5c48);
    border: 2px solid #a0765b;
    border-radius: 8px;
    width: 240px;
    height: 260px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow-y: visible;
}

.option-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}


.option-card {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: all 0.4s ease;
}

.option-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}


.option-card h4 {
    font-family: 'Bruno Ace SC', sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
    color: #EFEFEF;
}

input[type="radio"] {
  accent-color: #B18568; /* start he */
}

.option-card label {
    display: block;
    margin: 5px 0;
    font-size: 14px;
    color: #EFEFEF;
}

.option-card input[type="text"],
.option-card input[type="number"] {
    width: 100%;
    padding: 5px;
    margin-top: 4px;
    border-radius: 4px;
    border: 1px solid #a0765b;
    background-color: #2b2b2b;
    color: #EFEFEF;
    font-size: 14px;
    box-sizing: border-box;
}

.option-card input[type="number"]::-webkit-inner-spin-button,
.option-card input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


.quote-contact-info {
    max-width: 600px;
    margin: 40px auto 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.quote-contact-info .contact-input {
    display: flex;
    flex-direction: column;
}

.quote-contact-info label {
    font-family: 'Alkatra', sans-serif;
    font-size: 14px;
    color: #EFEFEF;
    margin-bottom: 6px;
    font-weight: 600;
}

.quote-contact-info input {
    background-color: #2b2b2b;
    border: 2px solid #5C4438;
    border-radius: 5px;
    padding: 10px;
    font-family: 'Alkatra', sans-serif;
    color: #EFEFEF;
    font-size: 14px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.quote-contact-info input::placeholder {
    color: #B18568;
}

.quote-contact-info input:focus {
    outline: none;
    border-color: #DCC2A8;
    box-shadow: 0 0 8px rgba(177,133,104,0.5);
}

.terms-accept {
  margin: 20px 0;
  font-size: 0.95rem;
  color: #f0f0f0; /
}

.terms-accept a {
  color: #a0765b;       
  text-decoration: underline;
  font-weight: 500;
  
}

.terms-accept input[type="checkbox"] {
  margin-right: 10px;
  transform: scale(1.1); 
  accent-color: #a0765b; 
}

.estimate-submit {
    text-align: center;
    margin-top: 30px;
}

.estimate-submit button {
    background-color: transparent;
    color: #B18568;
    font-family: 'Bruno Ace SC', sans-serif;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 35px;
    border: 2px solid #5C4438;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.estimate-submit button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}