/**
 * TERNBOOK — Frontend Styles
 * @package Ternbook
 */

/* ─── CSS Custom Properties ──────────────────────────────────────────────── */
.ternbook-wrapper {
    --ternbook-primary:        #25D366;
    --ternbook-primary-dark:   #1da851;
    --ternbook-primary-light:  #e8fdf0;
    --ternbook-text:           #1a1a2e;
    --ternbook-text-muted:     #6b7280;
    --ternbook-border:         #e5e7eb;
    --ternbook-border-focus:   #25D366;
    --ternbook-bg:             #ffffff;
    --ternbook-bg-subtle:      #f9fafb;
    --ternbook-error:          #ef4444;
    --ternbook-error-bg:       #fef2f2;
    --ternbook-success:        #10b981;
    --ternbook-radius-sm:      6px;
    --ternbook-radius-md:      12px;
    --ternbook-radius-lg:      20px;
    --ternbook-shadow-sm:      0 1px 3px rgba(0, 0, 0, .08);
    --ternbook-shadow-md:      0 4px 24px rgba(0, 0, 0, .10);
    --ternbook-shadow-lg:      0 12px 48px rgba(0, 0, 0, .14);
    --ternbook-transition:     0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --ternbook-font:           'Inter', system-ui, -apple-system, sans-serif;
}

/* ─── Google Fonts Import (Inter) ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ─── Wrapper ─────────────────────────────────────────────────────────────── */
.ternbook-wrapper {
    font-family:    var(--ternbook-font);
    color:          var(--ternbook-text);
    line-height:    1.6;
    -webkit-font-smoothing: antialiased;
    width:          100%;
    max-width:      680px;
    margin:         0 auto;
}

/* ─── Form Card ──────────────────────────────────────────────────────────── */
.ternbook-form-card {
    background:    var(--ternbook-bg);
    border-radius: var(--ternbook-radius-lg);
    box-shadow:    var(--ternbook-shadow-lg);
    overflow:      hidden;
    border:        1px solid var(--ternbook-border);
}

/* ─── Form Header ────────────────────────────────────────────────────────── */
.ternbook-form-header {
    display:         flex;
    align-items:     center;
    gap:             16px;
    padding:         28px 32px 24px;
    background:      linear-gradient(135deg, #0f1724 0%, #1a2740 100%);
    color:           #fff;
    position:        relative;
    overflow:        hidden;
}

.ternbook-form-header::before {
    content:         '';
    position:        absolute;
    inset:           0;
    background:      radial-gradient(ellipse at top right, rgba(37,211,102,.25) 0%, transparent 60%);
    pointer-events:  none;
}

.ternbook-wa-icon {
    flex-shrink:     0;
    width:           52px;
    height:          52px;
    background:      rgba(37, 211, 102, 0.15);
    border:          2px solid rgba(37, 211, 102, 0.3);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    z-index:         1;
}

.ternbook-wa-icon svg {
    width:  26px;
    height: 26px;
    fill:   #25D366;
}

.ternbook-form-title-wrap {
    position: relative;
    z-index:  1;
}

.ternbook-form-title {
    font-size:   1.375rem;
    font-weight: 700;
    margin:      0 0 4px;
    line-height: 1.3;
    color:       #fff;
}

.ternbook-form-subtitle {
    font-size:  0.875rem;
    margin:     0;
    opacity:    0.75;
    color:      #fff;
}

/* ─── Form Body ──────────────────────────────────────────────────────────── */
.ternbook-form {
    padding: 28px 32px 32px;
}

/* ─── Grid ───────────────────────────────────────────────────────────────── */
.ternbook-form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   20px;
}

.ternbook-col-6  { grid-column: span 1; }
.ternbook-col-12 { grid-column: 1 / -1; }

/* ─── Field Group ────────────────────────────────────────────────────────── */
.ternbook-field-group {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

/* ─── Label ──────────────────────────────────────────────────────────────── */
.ternbook-label {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--ternbook-text);
    letter-spacing: 0.01em;
}

.ternbook-required {
    color: var(--ternbook-error);
    margin-left: 2px;
}

/* ─── Input Wrap ─────────────────────────────────────────────────────────── */
.ternbook-input-wrap {
    position: relative;
}

.ternbook-input-icon {
    position:   absolute;
    left:       14px;
    top:        50%;
    transform:  translateY(-50%);
    width:      18px;
    height:     18px;
    color:      var(--ternbook-text-muted);
    pointer-events: none;
    display:    flex;
    align-items: center;
}

.ternbook-input-icon svg {
    width:  18px;
    height: 18px;
    fill:   currentColor;
}

/* ─── Input / Select ─────────────────────────────────────────────────────── */
.ternbook-input {
    width:             100%;
    padding:           11px 14px 11px 42px;
    font-size:         0.9375rem;
    font-family:       var(--ternbook-font);
    color:             var(--ternbook-text);
    background:        var(--ternbook-bg-subtle);
    border:            1.5px solid var(--ternbook-border);
    border-radius:     var(--ternbook-radius-md);
    outline:           none;
    transition:        border-color var(--ternbook-transition),
                       box-shadow   var(--ternbook-transition),
                       background   var(--ternbook-transition);
    box-sizing:        border-box;
    appearance:        none;
    -webkit-appearance: none;
}

.ternbook-input:hover {
    border-color: #d1d5db;
    background:   #fff;
}

.ternbook-input:focus {
    border-color: var(--ternbook-border-focus);
    background:   #fff;
    box-shadow:   0 0 0 4px rgba(37, 211, 102, 0.15);
}

.ternbook-input.ternbook--error {
    border-color: var(--ternbook-error);
    background:   var(--ternbook-error-bg);
    box-shadow:   0 0 0 4px rgba(239, 68, 68, 0.12);
}

.ternbook-input.ternbook--valid {
    border-color: var(--ternbook-success);
}

/* ─── Select Wrapper ─────────────────────────────────────────────────────── */
.ternbook-select-wrap {
    position: relative;
}

.ternbook-select {
    cursor: pointer;
    padding-right: 40px;
}

.ternbook-select-arrow {
    position:       absolute;
    right:          12px;
    top:            50%;
    transform:      translateY(-50%);
    pointer-events: none;
    color:          var(--ternbook-text-muted);
    width:          20px;
    height:         20px;
}

.ternbook-select-arrow svg {
    width:  20px;
    height: 20px;
    fill:   currentColor;
}

/* Date input calendar icon color */
input[type="date"].ternbook-input::-webkit-calendar-picker-indicator {
    opacity: 0.6;
    cursor:  pointer;
}

/* ─── Error Message ──────────────────────────────────────────────────────── */
.ternbook-error-msg {
    font-size:   0.8rem;
    color:       var(--ternbook-error);
    font-weight: 500;
    min-height:  1rem;
    display:     block;
    transition:  opacity var(--ternbook-transition);
}

/* ─── Submit Button ──────────────────────────────────────────────────────── */
.ternbook-submit-wrap {
    margin-top: 28px;
}

.ternbook-submit-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    width:           100%;
    padding:         15px 28px;
    font-size:       1rem;
    font-weight:     700;
    font-family:     var(--ternbook-font);
    border:          none;
    border-radius:   var(--ternbook-radius-md);
    cursor:          pointer;
    letter-spacing:  0.02em;
    transition:      filter       var(--ternbook-transition),
                     transform    var(--ternbook-transition),
                     box-shadow   var(--ternbook-transition);
    position:        relative;
    overflow:        hidden;
}

.ternbook-submit-btn::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(255,255,255,0);
    transition: background var(--ternbook-transition);
}

.ternbook-submit-btn:hover:not(:disabled)::after {
    background: rgba(255,255,255,0.12);
}

.ternbook-submit-btn:hover:not(:disabled) {
    filter:    brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

.ternbook-submit-btn:active:not(:disabled) {
    transform:  translateY(0);
    box-shadow: none;
}

.ternbook-submit-btn:disabled {
    opacity:  0.72;
    cursor:   not-allowed;
    filter:   none;
    transform: none;
}

.ternbook-btn-icon svg {
    width:  22px;
    height: 22px;
    display: block;
}

/* ─── Spinner ────────────────────────────────────────────────────────────── */
.ternbook-btn-spinner {
    display: flex;
}

.ternbook-spinner-svg {
    width:     20px;
    height:    20px;
    animation: ternbook-spin 0.85s linear infinite;
}

@keyframes ternbook-spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* ─── Form Notice ────────────────────────────────────────────────────────── */
.ternbook-form-notice {
    margin-top:    16px;
    padding:       12px 16px;
    border-radius: var(--ternbook-radius-sm);
    font-size:     0.875rem;
    font-weight:   500;
}

.ternbook-form-notice.ternbook--notice-error {
    background: var(--ternbook-error-bg);
    color:      var(--ternbook-error);
    border:     1px solid rgba(239,68,68,.25);
}

.ternbook-form-notice.ternbook--notice-success {
    background: var(--ternbook-primary-light);
    color:      #065f46;
    border:     1px solid rgba(37,211,102,.25);
}

/* ─── Ripple animation on submit ─────────────────────────────────────────── */
@keyframes ternbook-ripple {
    from { transform: scale(0); opacity: 0.5; }
    to   { transform: scale(4); opacity: 0; }
}

.ternbook-ripple {
    position:       absolute;
    border-radius:  50%;
    background:     rgba(255,255,255,0.3);
    width:          40px;
    height:         40px;
    margin-top:     -20px;
    margin-left:    -20px;
    animation:      ternbook-ripple 0.55s linear;
    pointer-events: none;
}

/* ─── Input entry animation ──────────────────────────────────────────────── */
@keyframes ternbook-fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ternbook-form-card {
    animation: ternbook-fadeIn 0.4s ease both;
}

.ternbook-field-group:nth-child(1) { animation: ternbook-fadeIn 0.4s 0.05s ease both; }
.ternbook-field-group:nth-child(2) { animation: ternbook-fadeIn 0.4s 0.10s ease both; }
.ternbook-field-group:nth-child(3) { animation: ternbook-fadeIn 0.4s 0.15s ease both; }
.ternbook-field-group:nth-child(4) { animation: ternbook-fadeIn 0.4s 0.20s ease both; }
.ternbook-field-group:nth-child(5) { animation: ternbook-fadeIn 0.4s 0.25s ease both; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ternbook-form-grid {
        grid-template-columns: 1fr;
    }

    .ternbook-col-6,
    .ternbook-col-12 {
        grid-column: 1 / -1;
    }

    .ternbook-form-header {
        padding:     20px;
        gap:         12px;
    }

    .ternbook-form {
        padding: 20px;
    }

    .ternbook-form-title {
        font-size: 1.125rem;
    }

    .ternbook-wa-icon {
        width:  42px;
        height: 42px;
    }

    .ternbook-wa-icon svg {
        width:  22px;
        height: 22px;
    }
}

@media (max-width: 380px) {
    .ternbook-form {
        padding: 16px;
    }

    .ternbook-form-header {
        padding: 16px;
    }
}

/* --- Modal & Popup Styles ------------------------------------------------- */
.ternbook-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ternbook-modal.ternbook-is-open {
    visibility: visible;
    opacity: 1;
}

.ternbook-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 36, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ternbook-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--ternbook-radius-lg);
    /* Hide scrollbar for cleaner look */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ternbook-modal-content::-webkit-scrollbar {
    display: none;
}

.ternbook-modal.ternbook-is-open .ternbook-modal-content {
    transform: scale(1) translateY(0);
}

.ternbook-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s, transform 0.2s;
}

.ternbook-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.ternbook-modal-close svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Form inside modal specific tweaks */
.ternbook-is-modal .ternbook-form-card {
    box-shadow: none; /* Shadow handled by modal if needed */
}

/* --- Floating Button Styles ----------------------------------------------- */
.ternbook-floating-btn {
    position: fixed;
    bottom: 30px;
    z-index: 999998;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    text-decoration: none;
    outline: none;
}

.ternbook-pos-right {
    right: 30px !important;
    left: auto !important;
}

.ternbook-pos-left {
    left: 30px !important;
    right: auto !important;
}

.ternbook-floating-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
}

.ternbook-floating-btn:active {
    transform: translateY(0) scale(0.98);
}

.ternbook-floating-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ternbook-floating-icon svg {
    width: 32px;
    height: 32px;
}

.ternbook-floating-text {
    font-family: var(--ternbook-font);
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

@media (max-width: 600px) {
    .ternbook-floating-btn {
        bottom: 20px;
        padding: 12px;
    }
    .ternbook-pos-right { right: 20px; }
    .ternbook-pos-left { left: 20px; }
    
    .ternbook-floating-text {
        display: none; /* Hide text on small screens, show icon only */
    }
    
    .ternbook-modal-content {
        max-height: 95vh;
    }
}

/* --- Social FAB Menu Styles ----------------------------------------------- */
.ternbook-fab-container {
    position: fixed;
    bottom: 30px;
    z-index: 999998;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.ternbook-fab-container.ternbook-pos-right {
    right: 30px !important;
    left: auto !important;
    align-items: flex-end;
}

.ternbook-fab-container.ternbook-pos-left {
    left: 30px !important;
    right: auto !important;
    align-items: flex-start;
}

.ternbook-fab-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.ternbook-fab-container.ternbook-fab-open .ternbook-fab-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.ternbook-fab-container.ternbook-pos-right .ternbook-fab-menu {
    align-items: flex-end;
}
.ternbook-fab-container.ternbook-pos-left .ternbook-fab-menu {
    align-items: flex-start;
}

.ternbook-fab-item {
    margin: 0;
    padding: 0;
}

.ternbook-fab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: #fff;
    outline: none;
}

.ternbook-fab-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.ternbook-fab-container .ternbook-floating-btn {
    position: static; /* override fixed from standard btn */
}

/* Toggle Icon States */
.ternbook-icon-close {
    display: none;
}

.ternbook-fab-open .ternbook-icon-open {
    display: none;
}

.ternbook-fab-open .ternbook-icon-close {
    display: flex;
}

@media (max-width: 600px) {
    .ternbook-fab-container {
        bottom: 20px;
    }
    .ternbook-fab-container.ternbook-pos-right { right: 20px; }
    .ternbook-fab-container.ternbook-pos-left { left: 20px; }
}

/* ─── Social Menu Hover Labels (Tooltip) ─────────────────────────────────── */
.ternbook-fab-item {
    position: relative;
    display: flex;
    align-items: center;
}

.ternbook-fab-label {
    position: absolute;
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6), opacity 0.3s ease, visibility 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.25) !important;
    pointer-events: none !important;
    font-family: inherit !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Tooltip arrow */
.ternbook-fab-label::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
}

/* Right Aligned Container: Tooltip on Left */
.ternbook-pos-right .ternbook-fab-label {
    right: 64px !important;
    transform: translateX(18px) scale(0.9) !important;
}

.ternbook-pos-right .ternbook-fab-label::after {
    left: 100%;
    border-color: transparent transparent transparent rgba(15, 23, 42, 0.95);
}

.ternbook-pos-right .ternbook-fab-item:hover .ternbook-fab-label {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) scale(1) !important;
}

/* Left Aligned Container: Tooltip on Right */
.ternbook-pos-left .ternbook-fab-label {
    left: 64px !important;
    transform: translateX(-18px) scale(0.9) !important;
}

.ternbook-pos-left .ternbook-fab-label::after {
    right: 100%;
    border-color: transparent rgba(15, 23, 42, 0.95) transparent transparent;
}

.ternbook-pos-left .ternbook-fab-item:hover .ternbook-fab-label {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) scale(1) !important;
}