/* C3D Studio — calculator styles.
 * The calculators were written with Bootstrap class names (row, col-md-6, form-control, table…).
 * Everything here is scoped to .c3d-tool and re-draws those classes in the Atelier theme:
 * ivory paper, charcoal type, hairline taupe rules, square corners, Playfair + Manrope.
 */
.c3d-tool { --ink: #1c1c19; --charcoal: #292826; --muted: #494740; --outline: #7a776f; --rule: #cac6bd; --taupe: #B9AEA1; --paper: #fcf9f4; --linen: #f6f3ee; --linen-2: #f0ede9;
  font-family: Manrope, sans-serif; color: var(--ink); }
.c3d-tool *, .c3d-tool *::before, .c3d-tool *::after { box-sizing: border-box; }

/* ---- layout (Bootstrap grid subset) ---- */
.c3d-tool .container { width: 100%; max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
.c3d-tool .row { display: flex; flex-wrap: wrap; margin-left: -0.75rem; margin-right: -0.75rem; row-gap: 0; }
.c3d-tool .row > * { width: 100%; max-width: 100%; padding-left: 0.75rem; padding-right: 0.75rem; flex-shrink: 0; }
.c3d-tool .row.g-4 { margin-left: -1rem; margin-right: -1rem; row-gap: 2rem; }
.c3d-tool .row.g-4 > * { padding-left: 1rem; padding-right: 1rem; }
.c3d-tool .col-12 { width: 100%; }
@media (min-width: 768px) {
  .c3d-tool .col-md-6 { width: 50%; }
  .c3d-tool .col-md-12 { width: 100%; }
}
@media (min-width: 992px) {
  .c3d-tool .col-lg-3 { width: 25%; }
  .c3d-tool .col-lg-4 { width: 33.3333%; }
  .c3d-tool .col-lg-6 { width: 50%; }
}

/* ---- spacing / alignment utilities (Bootstrap values) ---- */
.c3d-tool .text-center { text-align: center; }
.c3d-tool .mx-auto { margin-left: auto; margin-right: auto; }
.c3d-tool .mb-0 { margin-bottom: 0; } .c3d-tool .mb-2 { margin-bottom: .5rem; } .c3d-tool .mb-3 { margin-bottom: 1rem; } .c3d-tool .mb-4 { margin-bottom: 1.5rem; }
.c3d-tool .mt-3 { margin-top: 1rem; } .c3d-tool .mt-4 { margin-top: 1.5rem; } .c3d-tool .my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.c3d-tool .me-2 { margin-right: .5rem; } .c3d-tool .me-3 { margin-right: 1rem; }
.c3d-tool .py-5 { padding-top: 0; padding-bottom: 0; }
.c3d-tool .align-middle { vertical-align: middle; }
.c3d-tool .align-items-center { align-items: center; }

/* ---- the calculator card ---- */
.c3d-tool .tool-card { background: var(--linen); border: 1px solid rgba(185,174,161,.6); padding: 2rem; display: block; }
@media (min-width: 768px) { .c3d-tool .tool-card { padding: 3rem 3.5rem; } }
.c3d-tool .tool-card > h2:first-child { display: none; } /* the page hero already carries the title */

/* ---- typography ---- */
.c3d-tool h2, .c3d-tool h3, .c3d-tool h4, .c3d-tool h5 { font-family: 'Playfair Display', serif; font-weight: 400; color: var(--charcoal); letter-spacing: -0.005em; }
.c3d-tool h2 { font-size: 2rem; line-height: 2.5rem; margin: 0 0 .75rem; }
.c3d-tool h3 { font-size: 1.5rem; line-height: 2rem; margin: 0 0 .5rem; }
.c3d-tool h4 { font-size: 1.25rem; line-height: 1.75rem; margin: 0 0 .5rem; }
.c3d-tool h5 { font-size: 1.05rem; line-height: 1.5rem; margin: 0 0 .5rem; }
.c3d-tool p { font-size: .9375rem; line-height: 1.65; color: var(--muted); font-weight: 400; }
.c3d-tool .text-gold { color: var(--charcoal); font-weight: 400; letter-spacing: 0; }
.c3d-tool hr { border: 0; border-top: 1px solid rgba(185,174,161,.7); opacity: 1; }
.c3d-tool strong, .c3d-tool b { font-weight: 600; color: var(--charcoal); }
.c3d-tool ul, .c3d-tool ol { padding-left: 1.1rem; }
.c3d-tool li { font-size: .9375rem; line-height: 1.65; color: var(--muted); }

/* ---- form fields: hairline bottom rule ---- */
.c3d-tool .form-label { display: block; margin-bottom: .5rem; font-size: .6875rem; line-height: 1rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #665d52; }
.c3d-tool .form-control, .c3d-tool .form-select {
  display: block; width: 100%; padding: .5rem 0 .6rem; font: 400 1rem/1.5 Manrope, sans-serif; color: var(--ink);
  background-color: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; appearance: none; -webkit-appearance: none; }
.c3d-tool .form-control::placeholder { color: rgba(122,119,111,.6); }
.c3d-tool .form-control:focus, .c3d-tool .form-select:focus { outline: none; border-bottom: 1.5px solid var(--charcoal); }
.c3d-tool .form-select { padding-right: 1.5rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #7a776f 50%), linear-gradient(135deg, #7a776f 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.c3d-tool input[type=number]::-webkit-inner-spin-button { opacity: .4; }
.c3d-tool input[type=checkbox], .c3d-tool input[type=radio] { accent-color: var(--charcoal); width: 1rem; height: 1rem; border-radius: 0; }

/* ---- buttons ---- */
.c3d-tool .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 2.25rem; border: 1px solid transparent; border-radius: 0;
  font: 600 .6875rem/1rem Manrope, sans-serif; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; text-decoration: none; }
.c3d-tool .btn-accent { background: var(--charcoal); color: var(--paper); }
.c3d-tool .btn-accent:hover { background: #3b3734; color: var(--paper); }
.c3d-tool .btn-outline-dark { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.c3d-tool .btn-outline-dark:hover { background: var(--charcoal); color: var(--paper); }
.c3d-tool .converter-btn { width: auto; min-width: 220px; height: auto; margin: 0 auto; }

/* ---- result tables ---- */
.c3d-tool .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.c3d-tool .table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; background: transparent; display: table; }
.c3d-tool .table th, .c3d-tool .table td { padding: .85rem 1rem; text-align: left; vertical-align: middle; font-size: .9375rem; line-height: 1.5; border-bottom: 1px solid rgba(185,174,161,.6); }
.c3d-tool .table th { font-weight: 600; color: #665d52; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; width: 45%; }
.c3d-tool .table td { color: var(--charcoal); }
.c3d-tool .table-bordered { border-top: 1px solid rgba(185,174,161,.6); }
.c3d-tool .table-bordered th, .c3d-tool .table-bordered td { border-left: 0; border-right: 0; }
.c3d-tool .table thead th { background: var(--charcoal); color: var(--paper); border-bottom: 0; width: auto; }
.c3d-tool .table tbody tr:nth-child(even) td, .c3d-tool .table tbody tr:nth-child(even) th { background: rgba(240,237,233,.6); }
.c3d-tool .dimension-table { border: 1px solid rgba(185,174,161,.6); }

/* ---- tips & alerts ---- */
.c3d-tool .designer-tip { background: var(--paper); border: 1px solid rgba(185,174,161,.6); border-left: 3px solid var(--charcoal); padding: 1.25rem 1.5rem; }
.c3d-tool .designer-tip h5 { font-family: Manrope, sans-serif; font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--charcoal); margin-bottom: .5rem; }
.c3d-tool .designer-tip p { margin: 0; }
.c3d-tool .alert { padding: 1rem 1.25rem; border: 1px solid rgba(185,174,161,.6); background: var(--paper); color: var(--muted); }
.c3d-tool .alert-warning { border-left: 3px solid #8a6d3b; }

/* ---- section heading box (Standard Dimensions) ---- */
.c3d-tool .section-title-box { background: transparent; border: 0; border-bottom: 1px solid rgba(185,174,161,.6); padding: 0 0 1.5rem; margin-bottom: 2.5rem; box-shadow: none; border-radius: 0; }
.c3d-tool .section-title-box h2 { margin-bottom: .5rem; }
.c3d-tool .tool-title { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 400; color: var(--charcoal); }
.c3d-tool .tool-subtitle { font-size: .8125rem; color: var(--outline); margin-top: .15rem; }

/* ---- accordion (Bootstrap collapse JS) ---- */
.c3d-tool .collapse { visibility: visible; } /* undo Tailwind's .collapse utility */
.c3d-tool .collapse:not(.show) { display: none; }
.c3d-tool .collapsing { height: 0; overflow: hidden; transition: height .35s ease; }
.c3d-tool .accordion { border-top: 1px solid rgba(185,174,161,.6); }
.c3d-tool .accordion-item { background: transparent; border: 0; border-bottom: 1px solid rgba(185,174,161,.6); border-radius: 0; box-shadow: none; margin: 0; overflow: visible; }
.c3d-tool .accordion-header { margin: 0; }
.c3d-tool .accordion-button { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.25rem .25rem; background: transparent; border: 0; text-align: left; cursor: pointer; color: var(--charcoal); font: inherit; }
.c3d-tool .accordion-button i { font-size: 1.25rem; color: var(--outline); width: 1.75rem; text-align: center; }
.c3d-tool .accordion-button::after { content: ""; margin-left: auto; width: .55rem; height: .55rem; border-right: 1.5px solid var(--outline); border-bottom: 1.5px solid var(--outline); transform: rotate(45deg); transition: transform .25s; }
.c3d-tool .accordion-button:not(.collapsed)::after { transform: rotate(-135deg); }
.c3d-tool .accordion-button:hover { background: var(--linen-2); }
.c3d-tool .accordion-body { padding: .5rem .25rem 2rem; }

/* result fade-in, as before */
@media (prefers-reduced-motion: no-preference) {
  .c3d-tool [id$="Result"] > * { animation: c3dFade .4s ease; }
  @keyframes c3dFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}