/*!
 * X-Value Calculator Widget styles.
 *
 * Every rule is scoped under `.xvalue-calculator-widget` so the widget
 * can't leak styles into a host page (and vice versa).
 *
 * Form elements match xvaluePricing.jsp's IDs and classes for JS compatibility.
 * Layout is restructured per Figma for narrow-column (PDP sidebar) rendering.
 */

/* ========================================================================== */
/* Widget container                                                           */
/* ========================================================================== */

.xvalue-calculator-widget {
    /* Design-system tokens (Figma variables). */
    --xv-purple-80:  #483387;
    --xv-purple-40:  #B6ADCF;
    --xv-purple-10:  #DAD6E7;
    --xv-purple-05:  #F6F5F9;
    --xv-black-100:  #000000;
    --xv-black-80:   #5F5F5F;
    --xv-black-60:   #ADADAD;
    --xv-black-05:   #FAFAFA;
    --xv-teal-50:    #58C3C4;
    --xv-ochre-50:   #FFBA00;
    --xv-red:        #FF0000;

    --xv-radius-card:   16px;
    --xv-radius-field:  67px;
    --xv-radius-pill:   45px;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background-color: var(--xv-purple-05);
    border-radius: var(--xv-radius-card);
    color: var(--xv-purple-80);
    font-family: CeraProRegular, "Cera Pro", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    overflow: visible;
    margin-top: 30px;
}

.xvalue-calculator-widget *,
.xvalue-calculator-widget *::before,
.xvalue-calculator-widget *::after {
    box-sizing: border-box;
}

/* ========================================================================== */
/* Header                                                                     */
/* ========================================================================== */

.xvalue-calculator-widget .xvcw-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xvalue-calculator-widget .xvcw-title {
    margin: 0;
    font-family: CeraProBold, CeraProMedium, "Cera Pro", sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.25;
    color: var(--xv-purple-80);
}

.xvalue-calculator-widget .xvcw-subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    color: var(--xv-purple-80);
}

/* ========================================================================== */
/* Sale / Rent toggle                                                         */
/* ========================================================================== */

.xvalue-calculator-widget .sale-rent-div-btn {
    display: flex;
}

.xvalue-calculator-widget .sale-rent-div {
    display: inline-flex;
    gap: 12px;
    padding: 4px;
    border: 1px solid var(--xv-purple-40);
    border-radius: 24px;
}

.xvalue-calculator-widget .sale-or-rent {
    padding: 8px 12px;
    border-radius: var(--xv-radius-pill);
    font-size: 16px;
    line-height: 1.25;
    color: var(--xv-black-80);
    cursor: pointer;
    user-select: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.xvalue-calculator-widget .sale-or-rent.selected {
    background: var(--xv-purple-80);
    color: var(--xv-purple-10);
}

/* ========================================================================== */
/* Body layout                                                                */
/* ========================================================================== */

.xvalue-calculator-widget .xvalue-main-div {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.xvalue-calculator-widget .form-horizontal {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 0;
    border: 0;
}

/* ========================================================================== */
/* Form controls — pill-shaped inputs and selects                             */
/* Override Bootstrap's .form-control within the widget scope.                */
/* ========================================================================== */

.xvalue-calculator-widget .form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--xv-black-60) !important;
    border-radius: var(--xv-radius-field) !important;
    background-color: var(--xv-black-05) !important;
    color: var(--xv-black-100);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.125;
    outline: none;
    height: auto !important;
    box-shadow: none !important;
}

.xvalue-calculator-widget .form-control:focus {
    border-color: var(--xv-purple-80) !important;
    box-shadow: none !important;
}

.xvalue-calculator-widget .form-control::placeholder {
    color: var(--xv-black-60);
}

.xvalue-calculator-widget select.form-control {
    cursor: pointer;
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(https://s3-ap-southeast-1.amazonaws.com/static.streetsine/Web/Version_4/Assets/common/chevron-down-black.svg);
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
}

/* ========================================================================== */
/* Search typeahead field                                                     */
/* ========================================================================== */

.xvalue-calculator-widget .xvcw-field--search {
    position: relative;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
}

.xvalue-calculator-widget .xvcw-field-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    color: var(--xv-black-60);
    display: inline-flex;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
}

.xvalue-calculator-widget .xvcw-field--search .form-control,
.xvalue-calculator-widget .xvcw-field--search .tt-input {
    padding-left: 48px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.375;
}

/* Typeahead wraps the input — ensure full width */
.xvalue-calculator-widget .twitter-typeahead {
    width: 100% !important;
    flex: 1 1 0;
}

.xvalue-calculator-widget .tt-menu,
.xvalue-calculator-widget .tt-dropdown-menu {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 8px;
    padding: 8px 0;
    background: #fff;
    border: 1px solid var(--xv-purple-40);
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    text-align: left;
    color: var(--xv-black-100);
    z-index: 10;
}

.xvalue-calculator-widget .tt-suggestion {
    padding: 8px 16px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xvalue-calculator-widget .tt-suggestion:hover,
.xvalue-calculator-widget .tt-suggestion.tt-cursor {
    background: var(--xv-teal-50);
    color: #fff;
}

.xvalue-calculator-widget .empty-message {
    padding: 8px 16px;
    color: var(--xv-black-80);
    font-size: 16px;
}

/* ========================================================================== */
/* Floor + Unit — two separate pill inputs, side by side                      */
/* ========================================================================== */

.xvalue-calculator-widget .xvcw-floor-unit {
    display: flex;
    gap: 24px;
}

.xvalue-calculator-widget .xvcw-floor-unit > div {
    flex: 1 1 0;
    min-width: 0;
}

/* ========================================================================== */
/* Size row — single pill container: input + unit label + Get-size button     */
/* ========================================================================== */

.xvalue-calculator-widget .sqm-div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 16px;
    border: 1px solid var(--xv-black-60);
    border-radius: var(--xv-radius-field);
    background: var(--xv-black-05);
    overflow: hidden;
}

.xvalue-calculator-widget .sqm-div .sqm-input {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.xvalue-calculator-widget .sqm-div .sqm-input:focus {
    border: 0 !important;
    outline: none;
    box-shadow: none !important;
}

.xvalue-calculator-widget .sqm-label {
    font-size: 16px;
    color: var(--xv-black-100);
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
    text-transform: capitalize;
}

.xvalue-calculator-widget .getsize-btn {
    flex-shrink: 0;
    width: auto !important;
    padding: 4px 8px !important;
    height: auto !important;
    border: 1px solid var(--xv-teal-50) !important;
    border-radius: var(--xv-radius-pill) !important;
    background-color: var(--xv-black-05) !important;
    color: var(--xv-black-100);
    font-family: CeraProMedium, "Cera Pro", sans-serif;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.xvalue-calculator-widget .getsize-btn:hover {
    background: var(--xv-purple-05) !important;
}

/* ========================================================================== */
/* Extension area                                                             */
/* ========================================================================== */

.xvalue-calculator-widget .xvcw-ext {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: -16px;
}

.xvalue-calculator-widget .extn-area-div {
    align-self: flex-start;
    color: var(--xv-teal-50);
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
}

.xvalue-calculator-widget .ext-div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--xv-black-60);
    border-radius: var(--xv-radius-field);
    background: var(--xv-black-05);
}

.xvalue-calculator-widget .ext-div .form-control {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.xvalue-calculator-widget .ext-div .form-control:focus {
    outline: none;
    box-shadow: none !important;
}

.xvalue-calculator-widget .ext-div span {
    font-size: 16px;
    color: var(--xv-black-100);
    white-space: nowrap;
    text-transform: capitalize;
    line-height: 1;
}

/* ========================================================================== */
/* Landed-specific block                                                      */
/* ========================================================================== */

.xvalue-calculator-widget .xvcw-landed {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Override .d-block so landed div keeps flex layout when JS shows it */
.xvalue-calculator-widget .xvcw-landed.d-block {
    display: flex !important;
}

.xvalue-calculator-widget .xvcw-field--landed-gfa {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--xv-black-60);
    border-radius: var(--xv-radius-field);
    background: var(--xv-black-05);
}

.xvalue-calculator-widget .xvcw-field--landed-gfa .form-control {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.xvalue-calculator-widget .xvcw-field--landed-gfa .form-control:focus {
    outline: none;
    box-shadow: none !important;
}

.xvalue-calculator-widget .xvcw-field--landed-gfa span {
    font-size: 16px;
    color: var(--xv-black-100);
    white-space: nowrap;
    text-transform: capitalize;
    line-height: 1;
}

/* ========================================================================== */
/* Feedback / errors                                                          */
/* ========================================================================== */

.xvalue-calculator-widget .calculate-xvalue-div {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.xvalue-calculator-widget .calculate-error,
.xvalue-calculator-widget .calculate-commercial {
    color: var(--xv-red);
    font-size: 14px;
    line-height: 1.4;
}

/* ========================================================================== */
/* Submit button                                                              */
/* ========================================================================== */

.xvalue-calculator-widget .xvalue-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 56px !important;
    padding: 8px 16px !important;
    border: 0 !important;
    border-radius: var(--xv-radius-pill) !important;
    background: var(--xv-ochre-50) !important;
    color: var(--xv-black-100) !important;
    font-family: CeraProMedium, "Cera Pro", sans-serif;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.xvalue-calculator-widget .xvalue-btn:hover {
    filter: brightness(0.95);
}

.xvalue-calculator-widget .xvalue-btn.disabled,
.xvalue-calculator-widget .xvalue-btn:disabled {
    opacity: 0.47;
    cursor: not-allowed;
}

.xvalue-calculator-widget .xvalue-btn .spinner-border {
    color: inherit;
}

/* ========================================================================== */
/* Utilities                                                                  */
/* ========================================================================== */

.xvalue-calculator-widget .d-none { display: none !important; }
.xvalue-calculator-widget .d-block { display: block !important; }

/* ========================================================================== */
/* Narrow column tweaks                                                       */
/* ========================================================================== */

@media (max-width: 320px) {
    .xvalue-calculator-widget .xvcw-floor-unit {
        flex-direction: column;
    }
}