/**
 * Swedbank Booking System - Frontend Styles
 */

/* CSS Variables - Global scope for modal access */
:root {
    --sbs-primary-color: #ff5f00;
    --sbs-base-color: #512b2b;
    --sbs-light-color: #FDF6EE;
    --sbs-green-light-color: #EBF8F2;
    --sbs-teal-color: #257886;
    --sbs-teal-light-color: #BCD8DB;
    --sbs-aqua-color: #BBEAD9;
    --sbs-gray-color: #F9F8F6;
    --sbs-error-color: #FFF1CD;
    --sbs-border-radius: 16px;
    --sbs-outline-shadow: 0px 0px 0px 2px #FFF, 0px 0px 0px 5px #FF5F00;
}

/* Reset and base styles */
.sbs-booking-system * {
    box-sizing: border-box;
}

.sbs-booking-system {
    margin: 36px auto;
    padding: 48px 72px;
    border-radius: var(--sbs-border-radius);
    background: var(--sbs-light-color);
}

@media (max-width: 1024px) {
    .sbs-booking-system {
        padding: 36px 15px;
        margin: 36px -15px;
        border-radius: 0;
    }
}

.sbs-booking-system small {
    font-size: 13px;
}

/* Header */
.sbs-header {
    margin-bottom: 24px;
}

.sbs-title {
    font-size: 2rem;
    line-height: 40px;
    font-weight: 700;
    color: var(--sbs-primary-color);
    margin-bottom: 16px;
}

.sbs-description {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
    max-width: 762px;
}

@media (max-width: 768px) {
    .sbs-description {
        font-size: 18px;
    }
}

/* Main content layout */
.sbs-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

@media (max-width: 1024px) {
    .sbs-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Calendar section */
.sbs-calendar-section {
    background: #fff;
    border-radius: var(--sbs-border-radius);
    padding: 36px;
    min-height: 444px;
}

@media (max-width: 768px) {
   .sbs-calendar-section {
        padding: 16px;
        min-height: 340px;
    }
}

.sbs-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sbs-month-year {
    font-family: "SwedbankHeadline", sans-serif;
    color: var(--sbs-base-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    cursor: pointer;
    margin: 0;
}

@media (max-width: 768px) {
   .sbs-month-year {
        font-size: 18px;
    }
}

.sbs-nav-button {
    background: transparent;
    color: var(--sbs-teal-color);
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sbs-nav-button.sbs-disabled {
    color: var(--sbs-teal-light-color);
    cursor: not-allowed;
}

/* Calendar grid */
.sbs-calendar-grid {
    overflow: hidden;
}

.sbs-day-name {
    padding: 2px;
    margin: 0 6px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
  .sbs-day-name {
        padding: 2px;
        margin: 0;
        width: 32px;
        height: 32px;
    }
}

.sbs-calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

@media (max-width: 768px) {
  .sbs-calendar-body  {
        row-gap: 16px;
    }
}

.sbs-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-direction: column;
    padding: 2px;
    margin: 0 6px;
    width: 48px;
    height: 48px;
    border-radius: 100%;
    background: var(--sbs-gray-color);
    border: 1px solid var(--sbs-gray-color);
    color: #696969;
}

@media (max-width: 768px) {
  .sbs-calendar-day {
        padding: 2px;
        margin: 0;
        width: 32px;
        height: 32px;
    }
}

/* .sbs-calendar-day:hover:not(.sbs-past):not(.sbs-unavailable) {

} */

.sbs-calendar-day.sbs-selected {
    background: var(--sbs-green-light-color) !important;
    color: var(--sbs-teal-color) !important;
    border: 1px solid var(--sbs-green-light-color) !important;
}

.sbs-calendar-day.sbs-past {
    background: var(--sbs-gray-color);
    border: 1px solid var(--sbs-gray-color);
    color: #696969;
    cursor: not-allowed;
}

.sbs-calendar-day.sbs-unavailable {
    background: var(--sbs-gray-color);
    border: 1px solid var(--sbs-gray-color);
    color: #696969;
    font-weight: 400;
    cursor: not-allowed;
}

.sbs-calendar-day.sbs-has-appointments {
    border: 1px solid var(--sbs-aqua-color);
    background: transparent;
    color: var(--sbs-teal-color);
}

.sbs-day-number {
    font-weight: 600;
    font-size: 0.9rem;
}

.sbs-empty {
    background: transparent;
    border: 1px solid transparent;
    cursor: default;
}

/* Appointments section */
/* .sbs-appointments-section {

} */

.sbs-appointments-header h3 {
    font-size: 1.4rem;
    color: #333;
    margin: 0 0 20px 0;
    font-weight: 600;
}

.sbs-appointments-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (max-width: 768px) {
    .sbs-appointments-list {
        gap: 24px;
    }
}

.sbs-appointment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-radius: var(--sbs-border-radius);
    background: #fff;
}

@media (max-width: 768px) {
    .sbs-appointment-item {
        padding: 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}


.sbs-appointment-time {
    font-size: 20px;
    font-family: "SwedbankHeadline", sans-serif;
    font-weight: 700;
    color: var(--sbs-primary-color);
}

@media (max-width: 768px) {
    .sbs-appointment-time {
        font-size: 18px;
    }
}

.sbs-appointment-duration {
    font-size: 15px;
}

.sbs-appointment-title {
    width: 100%;
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .sbs-appointment-title {
        font-size: 16px;
    }
}

.sbs-appointment-location {
    width: 100%;
    font-size: 15px;
}

@media (max-width: 768px) {
    .sbs-appointment-location {
        font-size: 16px;
    }
}

.sbs-full-text {
    color: #f44336;
    font-weight: 600;
    padding: 12px 24px;
}

.sbs-no-appointments {
    text-align: center;
    font-weight: 700;
    padding: 40px 20px;
}

.sbs-select-date-message {
    text-align: center;
    padding: 40px 20px;
    font-weight: 700;
}

/* Loading states */
.sbs-loading {
    text-align: center;
    padding: 40px 20px;
    font-weight: 700;
}

/* Initial loading overlay */
.sbs-booking-system.sbs-loading-initial .sbs-content {
    display: none;
}

.sbs-initial-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 60px 20px;
}

.sbs-loader-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--sbs-gray-color);
    border-top: 4px solid var(--sbs-primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sbs-loader-text {
    font-weight: 700;
}

.sbs-booking-system.sbs-content-ready .sbs-content {
    display: grid;
    transition: opacity 0.3s ease-in-out;
}

.sbs-booking-system.sbs-content-ready .sbs-initial-loader {
    display: none;
}

/* Modal styles */
.sbs-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.sbs-modal.sbs-modal-open {
    display: flex;
}

.sbs-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.sbs-modal-content {
    position: relative;
    background: white;
    border-radius: var(--sbs-border-radius);
    max-width: 840px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.sbs-modal-header {
    display: flex;
    justify-content: space-between;
    padding: 36px 36px 24px;
}

@media (max-width: 768px) {
    .sbs-modal-header {
        padding: 36px 22px 22px;
        align-items: center;
    }
}

.sbs-modal-title {
    font-family: "SwedbankHeadline", sans-serif;
    font-size: 32px;
    font-weight: 900;
    line-height: 40px;
    color: var(--sbs-primary-color);
    margin: 0;
}

@media (max-width: 768px) {
    .sbs-modal-title {
        font-size: 30px;
        line-height: 32px;
    }
}

.sbs-button-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--sbs-base-color);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    outline: none;
}

.sbs-modal-body {
    padding: 0 36px 36px;
}

@media (max-width: 768px) {
    .sbs-modal-body {
        padding: 0 22px 36px;
    }
}

.sbs-modal-body .sbs-appointment-info {
  background: var(--sbs-light-color);
  border-radius: var(--sbs-border-radius);
  padding: 24px;
  margin-bottom: 24px;
}

/* Appointment info in modal */
.sbs-appointment-info {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 16px;
}

.sbs-appointment-info h3 {
    color: var(--sbs-primary-color);
    margin: 0 0 10px 0;
    font-size: 1.2rem;
}

.sbs-appointment-info p {
    margin: 5px 0;
    color: #666;
}

/* Form styles */
.sbs-booking-form {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.sbs-form-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    margin: 0 -12px;
    row-gap: 16px;
}

@media (max-width: 768px) {
    .sbs-form-section {
        margin: 0;
    }
}


.sbs-form-section h4 {
    color: var(--sbs-base-color);
    margin: 0;
    font-family: "SwedbankHeadline", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}

@media (max-width: 768px) {
    .sbs-form-section h4 {
        font-size: 18px;
    }
}

.sbs-form-row {
    display: flex;
    gap: 15px;
}

.sbs-form-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sbs-half {
    width: 50%;
}

@media (max-width: 768px) {
    .sbs-half {
        width: 100%;
    }
}

.sbs-form-group label {
    margin-bottom: 6px;
}

.sbs-required {
    color: var(--sbs-primary-color);
}

.sbs-form-group input,
.sbs-form-group textarea {
    padding: 10px 16px;
    border: 2px solid var(--sbs-teal-light-color);
    border-radius: 4px;
    transition: border-color 0.15s ease;
    font-family: inherit;
}

.sbs-form-group input:hover,
.sbs-form-group textarea:hover {
    border: 2px solid var(--sbs-teal-color);
}

.sbs-form-group input:focus,
.sbs-form-group textarea:focus {
    outline: none;
    box-shadow: 0px 0px 0px 3px var(--sbs-primary-color);
    border: 2px solid var(--sbs-teal-light-color);
}

.sbs-form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Checkbox styling */
.sbs-checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: 12px;
    line-height: 1.5;
}

.sbs-checkbox-text {
    flex: 1;
}

@media (max-width: 768px) {
    .sbs-checkbox-text a {
        display: block;
        margin-top: 8px;
    }
}

.sbs-checkbox-label input[type="checkbox"] {
    display: none;
}

.sbs-checkmark {
    width: 24px;
    height: 24px;
    border: 2px solid var(--sbs-teal-light-color);
    border-radius: 4px;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.sbs-checkmark:hover {
    border: 2px solid var(--sbs-teal-color);
}

.sbs-checkbox-label input[type="checkbox"]:checked + .sbs-checkmark {
    background: var(--sbs-primary-color);
    border-color: var(--sbs-primary-color);
}

.sbs-checkbox-label input[type="checkbox"]:checked + .sbs-checkmark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.sbs-gdpr-link {
    color: var(--sbs-primary-color);
    text-decoration: none;
}

.sbs-gdpr-link:hover {
    text-decoration: underline;
}

/* Form actions */
.sbs-form-actions {
    width: 100%;
    display: flex;
    gap: 24px;
}

.sbs-button {
    margin: 0;
    display: inline-block;
    border-radius: 1.5rem;
    border-width: 2px;
    border-color: var(--sbs-teal-color);
    color: var(--sbs-teal-color);
    background: transparent;
    padding: 11px 20px 9px 20px;
    font-family: 'SwedbankHeadline', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 150ms;
}

.sbs-button:hover {
    background: #F1EEEE;
}

.sbs-button:focus {
    box-shadow: 0 0 #0000, 0 0 #0000, var(--sbs-outline-shadow);
}

.sbs-button-primary {
    background: var(--sbs-primary-color);
    border: 2px solid var(--sbs-primary-color);
    color: #fff;
}

.sbs-button-primary:hover {
    background: #F25A02;
    border: 2px solid #F25A02;
}

.sbs-button-primary:focus {
    box-shadow: 0 0 #0000, 0 0 #0000, var(--sbs-outline-shadow);
}

.sbs-button-primary:active {
    background: #e35706;
    border: 2px solid #e35706;
}

.sbs-button-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Form messages */
.sbs-form-messages {
    width: 100%;
}

.sbs-message {
    padding: 16px;
    border-radius: var(--sbs-border-radius);
    margin-bottom: 16px;
}

.sbs-message.sbs-error {
    background: var(--sbs-error-color);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sbs-message.sbs-error::before {
    content: '';
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.9002 21.0006H4.09977C2.48406 21.0006 1.47686 19.2331 2.28471 17.8255L10.1849 4.05632C10.9928 2.64871 13.0072 2.64871 13.8151 4.05632L21.7153 17.8255C22.5231 19.2331 21.5159 21.0006 19.9002 21.0006Z' fill='%23FDC92A'%3e%3c/path%3e%3cpath d='M12.0007 14.5043C12.513 14.5043 12.9385 14.109 12.976 13.5981L13.2859 9.38322C13.3409 8.63627 12.7497 8 12.0007 8C11.2517 8 10.6605 8.63627 10.7155 9.38322L11.0254 13.5981C11.0629 14.109 11.4884 14.5043 12.0007 14.5043Z' fill='%23512B2B'%3e%3c/path%3e%3cpath d='M13.0853 16.3761C12.7866 16.0769 12.421 15.9238 12.0007 15.9238C11.5804 15.9238 11.2148 16.0769 10.9162 16.3761C10.6175 16.6752 10.4648 17.0413 10.4648 17.4619C10.4648 17.8826 10.6175 18.2486 10.9162 18.5478C11.2148 18.8469 11.5804 19 12.0007 19C12.421 19 12.7866 18.8469 13.0853 18.5478C13.3839 18.2486 13.5366 17.8826 13.5366 17.4619C13.5366 17.0413 13.3839 16.6752 13.0853 16.3761Z' fill='%23512B2B'%3e%3c/path%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Success modal specific styles */
.sbs-success-content {
    max-width: 840px;
}

.sbs-success-message {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
}

.sbs-success-details {
    flex: 1;
}

.sbs-appointment-details {
    margin-bottom: 6px;
}

.sbs-next-steps {
    background: var(--sbs-light-color);
    border-radius: var(--sbs-border-radius);
    padding: 24px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .sbs-next-steps {
        padding: 18px;
    }
}

.sbs-next-steps h4,
.sbs-followup-info h4 {
    color: var(--sbs-primary-color);
    margin: 0 0 15px 0;
    font-size: 1.1rem;
}

.sbs-next-steps ul {
    margin: 0;
    list-style: none;
}

.sbs-next-steps li {
    position: relative;
    margin-bottom: 0;
    line-height: 24px;
    padding-left: 16px;
}

.sbs-next-steps li::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    width: 8px;
    height: 8px;
    background: #c5569a;
    border-radius: 100%;
}

.sbs-followup-info {
    margin-bottom: 24px;
}

.sbs-followup-info p {
    margin: 0 0 6px;
}

.sbs-followup-info p:last-child {
    margin: 0;
}

/* Modal open body lock */
body.sbs-modal-open {
    overflow: hidden;
}

/* Booking disabled message */
.sbs-booking-disabled {
    background: #fff3cd;
    border: 1px solid #feceba;
    color: #856404;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sbs-booking-disabled p {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
}