/* ========================================
     Schedule a Call Modal
     ======================================== */

/* Modal Container */
#schedule-call-modal .modal-content {
    border: none;
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

#schedule-call-modal h2 {
    font-size: 22px;
    font-weight: var(--medium-font-weight);
}

/* Shared button styles */
#schedule-call-modal .btn {
    transition: all 0.25s ease;
}

#schedule-call-modal .btn-primary {
    font-weight: var(--medium-font-weight);
    background: var(--blue);
    border-color: var(--blue);
}

#schedule-call-modal .btn-primary:hover {
    background: var(--blue-hover);
    border-color: var(--blue-hover);
}

#schedule-call-modal .btn-primary.btn-block {
    margin-bottom: 12px;
}

#schedule-call-modal .btn-primary .fa {
    margin-right: 6px;
}

#schedule-call-modal .schedule-secondary {
    color: var(--gray-d-60);
    border-color: var(--gray-d-50);
}

#schedule-call-modal .schedule-secondary:hover {
    color: var(--blue);
    border-color: var(--blue);
    background: none;
}

/* Shared close button */
#schedule-call-modal .close {
    position: absolute;
    top: 23px;
    right: 26px;
    font-size: 26px;
}

/* Shared step header icon */
#schedule-call-modal .step-icon {
    display: block;
    color: var(--blue);
    margin-bottom: 16px;
}

/* ========================================
   Step 1: Chat Nudge
   ======================================== */
#schedule-call-nudge .modal-body {
    padding: 48px 44px 40px;
    position: relative;
}

#schedule-call-nudge .step-icon {
    font-size: 40px;
}

#schedule-call-nudge h2 {
    margin: 0 0 10px;
}

#schedule-call-nudge p {
    color: var(--gray-d-60);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* ========================================
   Step 2: Schedule Form
   ======================================== */
#schedule-call-form-step .step-header {
    padding: 32px 28px 0;
    position: relative;
    text-align: center;
}

#schedule-call-form-step .step-icon {
    font-size: 32px;
}

#schedule-call-form-step .step-header h2 {
    margin: 0 0 4px;
}

#schedule-call-form-step .step-header p {
    font-size: var(--small-font-size);
    color: var(--gray-d-60);
    margin: 0;
}

#schedule-call-form-step .modal-body {
    padding: 20px 44px 24px;
}

/* Form Fields */
#schedule-call-form .form-group label {
    font-weight: var(--medium-font-weight);
    font-size: var(--xs-font-size);
    color: var(--gray-d-60);
    margin-bottom: 6px;
}

#schedule-call-form .form-group label small {
    opacity: 1;
}

#schedule-call-form .form-control {
    border-radius: 6px;
    border-color: var(--gray-d-10);
    padding: 8px 12px;
}

#schedule-call-form .form-control:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(41, 128, 185, 0.15);
}

#schedule-call-form select.form-control {
    padding-top: 7px;
    padding-bottom: 7px;
}

#schedule-call-error {
    border-radius: 8px;
    font-weight: var(--medium-font-weight);
    font-size: var(--xs-font-size);
    padding: 12px 16px;
    color: var(--red, #d9534f);
    background: rgba(217, 83, 79, 0.08);
    border: 1px solid rgba(217, 83, 79, 0.25);
}

#topic-order-status-hint {
    margin: 15px 0;
    padding: 10px 14px;
    background: var(--off-white);
    border-radius: 6px;
    border-left: 3px solid var(--blue);
    font-size: var(--xs-font-size);
    color: var(--black-l-10);
}

#topic-order-status-hint a {
    color: var(--blue);
    font-weight: var(--medium-font-weight);
}

/* Call type */
#call-type-options {
    display: flex;
    gap: 12px;
}

#schedule-call-form .form-group .call-type-card {
    flex: 1;
    display: block;
    margin: 0;
    padding: 12px 14px;
    border: 2px solid var(--gray-d-10);
    border-radius: 10px;
    cursor: pointer;
    font-weight: normal;
    color: var(--black);
    transition: border-color 0.2s ease, background 0.2s ease;
}

#schedule-call-form .form-group .call-type-card:hover {
    border-color: var(--blue);
}

#schedule-call-form .form-group .call-type-card.selected {
    border-color: var(--blue);
    background: var(--off-white);
}

#call-type-options input[type="radio"] {
    margin: 0 6px 0 0;
    vertical-align: middle;
}

#call-type-options .call-type-title {
    font-size: 15px;
    font-weight: var(--x-heavy-font-weight);
    vertical-align: middle;
}

#call-type-options .call-type-title .fa {
    color: var(--blue);
    margin-right: 4px;
}

#call-type-options .call-type-desc {
    display: block;
    margin-top: 6px;
    font-size: var(--xs-font-size);
    line-height: 1.45;
    color: var(--gray-d-60);
}

/* Day Pills */
#slot-picker-days {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

#slot-picker-days .btn {
    width: calc((100% - 24px) / 5);
    flex: none;
    font-size: 12px;
    font-weight: var(--medium-font-weight);
    padding: 6px 4px;
    border-color: var(--gray-d-10);
}

#slot-picker-days .btn-primary,
#slot-picker-days .btn-primary:focus,
#slot-picker-days .btn-primary:active {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--pure-white);
    box-shadow: none;
    outline: none;
}

#slot-picker-days .btn-default:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: none;
}

/* Time Slots */
#slot-picker-times {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
}

#slot-picker-times .slot-btn {
    display: block;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--gray);
    border-radius: 0;
    font-size: 14px;
    padding: 12px 16px;
    text-align: center;
    color: var(--black);
    cursor: pointer;
}

#slot-picker-times .slot-btn:focus,
#slot-picker-times .slot-btn:active {
    outline: none;
    box-shadow: none;
}

#slot-picker-times .slot-btn:last-child {
    border-bottom: none;
}

#slot-picker-times .slot-btn:hover {
    color: var(--blue);
    background: var(--off-white);
}

#slot-picker-times .slot-btn.selected {
    color: var(--blue);
    background: var(--off-white);
    border-bottom-color: var(--blue);
}

#slot-picker-days .btn.day-full {
    opacity: 0.4;
    cursor: default;
    text-decoration: line-through;
}

#slot-picker-days .btn.day-full:hover {
    border-color: var(--gray-d-10);
    color: inherit;
    background: none;
}

@media screen and (max-width: 480px) {
    #slot-picker-days .btn {
        width: calc((100% - 12px) / 3);
    }

    #call-type-options {
        flex-direction: column;
    }
}