/* =========================================================
   Dental Collection Calculator v2 — calculator.css
   ========================================================= */

.dcc-wrap {
    --dcc-accent:    #2193D1;
    --dcc-accent-lt: color-mix(in srgb, var(--dcc-accent) 12%, #fff);
    --dcc-text:      #1c2b3a;
    --dcc-muted:     #5a6a7a;
    --dcc-border:    #dce3ea;
    --dcc-surface:   #ffffff;
    --dcc-bg:        #f3f7fb;
    --dcc-radius:    12px;
    --dcc-shadow:    0 4px 24px rgba(0,0,0,.08);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    color: var(--dcc-text);
    width: 520px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Card */
.dcc-card {
    background: var(--dcc-surface);
    padding: 2rem 2.25rem;
}

.dcc-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 .3rem;
    color: var(--dcc-text);
}

.dcc-subtitle {
    font-size: .88rem;
    color: var(--dcc-muted);
    margin: 0 0 1.5rem;
}

/* ── Input form ── */
.dcc-fields { display: grid; gap: 1.1rem; margin-bottom: 1.4rem; }

.dcc-field { display: flex; flex-direction: column; gap: .4rem; }

.dcc-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--dcc-text);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.dcc-tip { font-size: .78rem; color: var(--dcc-muted); cursor: help; }

.dcc-input-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--dcc-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}
.dcc-input-wrap:focus-within {
    border-color: var(--dcc-accent);
    box-shadow: 0 0 0 3px var(--dcc-accent-lt);
}

#dcc-1-collections {
	border: none;
}

/* Remove browser-default border on inputs inside the styled wrap */
.dcc-input-wrap input {
    border: none !important;
    outline: none !important;
}

.dcc-prefix {
    padding: 0 .7rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--dcc-muted);
    background: var(--dcc-bg);
    border-right: 1.5px solid var(--dcc-border);
    line-height: 2.6rem;
    user-select: none;
    white-space: nowrap;
}
.dcc-prefix--text { font-size: .8rem; letter-spacing: .02em; }

.dcc-input {
    flex: 1;
    border: none;
    outline: none;
    padding: .6rem .85rem;
    font-size: .95rem;
    font-family: inherit;
    color: var(--dcc-text);
    background: transparent;
    min-width: 0;
}

/* Buttons */
.dcc-btn {
    display: block;
    width: 100%;
    padding: .8rem 1rem;
    background: var(--dcc-accent);
    color: #fff;
    border: 1px solid var(--dcc-accent);
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-sizing: border-box;
}
.dcc-btn:hover {
	background-color: white;
    color: var(--dcc-accent);
}
.dcc-btn:disabled { opacity: .55; cursor: not-allowed; }

.dcc-btn--back {
    margin-top: 1.25rem;
    background: transparent;
    color: var(--dcc-accent);
    border: 1.5px solid var(--dcc-accent);
    font-size: .88rem;
}

.dcc-btn--consult {
    margin-top: 1rem;
}

/* Error */
.dcc-error {
    font-size: .83rem;
    color: #d93b3b;
    margin: .7rem 0 0;
    padding: .55rem .85rem;
    background: #fdf0f0;
    border-radius: 6px;
    border-left: 3px solid #d93b3b;
}

/* ── Result panel ── */
.dcc-result { animation: dccFadeIn .3s ease; }

@keyframes dccFadeIn {
    from { opacity:0; transform:translateY(5px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Gauge */
.dcc-gauge-wrap { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.dcc-gauge      { width: 200px; overflow: visible; }

.dcc-gauge-track { stroke: var(--dcc-border); }
.dcc-gauge-fill  {
    stroke: var(--dcc-accent);
    transition: stroke-dashoffset .75s cubic-bezier(.4,0,.2,1), stroke .35s;
}
.dcc-gauge-pct {
    font-size: 1.65rem;
    font-weight: 700;
    fill: var(--dcc-text);
    font-family: inherit;
}
.dcc-gauge-label {
    font-size: .68rem;
    fill: var(--dcc-muted);
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* Message */
.dcc-message {
    font-size: .86rem;
    line-height: 1.55;
    padding: .85rem 1rem;
    border-radius: 8px;
    background: var(--dcc-accent-lt);
    border-left: 3px solid var(--dcc-accent);
    color: var(--dcc-text);
    margin-bottom: 1.5rem;
}

/* ── Consult form ── */
.dcc-consult {
    background: var(--dcc-bg);
    border: 1px solid var(--dcc-border);
    border-radius: var(--dcc-radius);
    padding: 1.4rem 1.25rem 1.25rem;
}

.dcc-consult-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    color: var(--dcc-text);
}
.dcc-consult-sub {
    font-size: .82rem;
    color: var(--dcc-muted);
    margin: 0 0 1.1rem;
}

.dcc-consult-fields { display: grid; gap: .85rem; }

.dcc-consult-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
}

.dcc-cfield { display: flex; flex-direction: column; gap: .35rem; }
.dcc-cfield--full { grid-column: 1 / -1; }

.dcc-clabel {
    font-size: .78rem;
    font-weight: 600;
    color: var(--dcc-text);
}
.dcc-optional { font-weight: 400; color: var(--dcc-muted); }

.dcc-cinput {
    border: 1.5px solid var(--dcc-border);
    border-radius: 7px;
    padding: .55rem .75rem;
    font-size: .9rem;
    font-family: inherit;
    color: var(--dcc-text);
    background: var(--dcc-surface);
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    box-sizing: border-box;
    width: 100%;
}
.dcc-cinput:focus {
    border-color: var(--dcc-accent);
    box-shadow: 0 0 0 3px var(--dcc-accent-lt);
}
textarea.dcc-cinput { resize: vertical; min-height: 72px; }

.dcc-consult-error {
    font-size: .82rem;
    color: #d93b3b;
    margin: .6rem 0 0;
    padding: .5rem .8rem;
    background: #fdf0f0;
    border-radius: 6px;
    border-left: 3px solid #d93b3b;
}
.dcc-consult-success {
    font-size: .88rem;
    color: #1aad6b;
    margin: .75rem 0 0;
    padding: .6rem .85rem;
    background: #edfaf4;
    border-radius: 6px;
    border-left: 3px solid #1aad6b;
}

/* Responsive */
@media (max-width: 480px) {
    .dcc-card { padding: 1.35rem 1rem; }
    .dcc-title { font-size: 1.15rem; }
    .dcc-consult-row { grid-template-columns: 1fr; }
}