/**
 * ============================================================================
 * AL HOMES - SCHEDULE TOUR PAGE CSS
 * ============================================================================
 * 
 * Version: 6.3 - EXACT FIGMA MATCH
 * 
 * Features:
 * - Proxima Nova font family
 * - Hide Calendly's "Please share anything..." textarea (data still passes)
 * - Cookie settings LEFT, Report abuse RIGHT
 * - Troubleshooting pill button with icon
 * - Responsive on mobile
 * 
 * ============================================================================
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    /* Colors - From Figma */
    --al-primary: #5A4F42;
    --al-secondary: #928572;
    --al-text-dark: #18181b; /* zinc-900 */
    --al-text-muted: rgba(24, 24, 27, 0.6); /* zinc-900/60 */
    --al-border-color: #CCC8C0; /* outline-300 */
    --al-border-light: rgba(0, 0, 0, 0.1); /* border-black/10 */
    --al-bg-white: #ffffff;
    
    /* Typography - Proxima Nova */
    --al-font-primary: 'Proxima Nova', 'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Spacing - From Figma (p-7 = 28px) */
    --al-padding-card: 28px;
    
    /* Border - From Figma */
    --al-border-width: 0.7px;
    --al-border-radius: 16px; /* rounded-2xl */
    
    /* Sizes - From Figma */
    --al-card-width: 1092.44px;
    --al-card-height: 677.60px;
    --al-left-width: 384px; /* w-96 */
    --al-content-width: 320px; /* w-80 */
}


/* ============================================
   CONTAINER & CARD - Exact Figma Match
   ============================================ */
.al-schedule-container {
    max-width: calc(var(--al-card-width) + 40px);
    margin: 0 auto;
    padding: 40px 20px;
    font-family: var(--al-font-primary);
}

.al-schedule-card {
    display: flex;
    background: var(--al-bg-white);
    border-radius: var(--al-border-radius);
    outline: var(--al-border-width) solid var(--al-border-color);
    outline-offset: calc(-1 * var(--al-border-width));
    box-shadow: none;
    min-height: var(--al-card-height);
    overflow: hidden;
}


/* ============================================
   LEFT PANEL - Meeting Info (w-96 = 384px)
   ============================================ */
.al-schedule-left {
    width: var(--al-left-width);
    min-width: var(--al-left-width);
    flex-shrink: 0;
    padding: var(--al-padding-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.al-schedule-left-content {
    display: flex;
    flex-direction: column;
    gap: 24px; /* gap-6 */
}

/* Header: AL HOMES + Title */
.al-schedule-header {
    width: var(--al-content-width);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.al-schedule-company {
    margin: 0;
    font-size: 16px; /* text-base */
    font-weight: 400; /* font-normal */
    font-family: var(--al-font-primary);
    color: var(--al-text-muted);
    line-height: 1.5; /* leading-6 */
}

.al-schedule-title {
    margin: 0;
    font-size: 30px; /* text-3xl */
    font-weight: 400; /* font-normal */
    font-family: var(--al-font-primary);
    color: var(--al-text-dark);
    line-height: 1.33; /* leading-10 */
}

/* Duration + Description */
.al-schedule-details {
    width: var(--al-content-width);
    display: flex;
    flex-direction: column;
    gap: 12px; /* gap-3 */
}

.al-schedule-duration {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* gap-2 */
}

.al-schedule-clock-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--al-text-muted);
}

.al-schedule-duration-text {
    flex: 1;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--al-font-primary);
    color: var(--al-text-muted);
    line-height: 1.5;
}

.al-schedule-description {
    width: var(--al-content-width);
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--al-font-primary);
    color: var(--al-text-muted);
    line-height: 1.5;
}


/* ============================================
   PROPERTY CONTEXT BOX (HIDDEN BY DEFAULT)
   Data still passes to Calendly via URL param
   ============================================ */
.al-schedule-property-context {
    padding: 16px;
    background: #F5F3F0;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.al-schedule-property-context--hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.al-schedule-property-context--visible {
    position: relative;
    width: auto;
    height: auto;
    padding: 16px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: none;
}

.al-schedule-property-label {
    font-size: 10px;
    font-weight: 600;
    font-family: var(--al-font-primary);
    color: var(--al-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.al-schedule-property-name {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--al-font-primary);
    color: var(--al-text-dark);
    line-height: 1.4;
}

.al-schedule-property-type {
    display: inline-block;
    padding: 3px 8px;
    background: var(--al-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--al-font-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 3px;
    margin-top: 4px;
    width: fit-content;
}

.al-schedule-property-address {
    font-size: 13px;
    font-weight: 400;
    font-family: var(--al-font-primary);
    color: var(--al-text-muted);
    line-height: 1.4;
    margin-top: 2px;
}


/* ============================================
   FOOTER LINKS - Cookie settings LEFT, Report abuse RIGHT
   ============================================ */
.al-schedule-left-footer {
    width: var(--al-content-width);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.al-schedule-footer-link {
    font-size: 14px; /* text-sm */
    font-weight: 400;
    font-family: var(--al-font-primary);
    line-height: 1.43; /* leading-5 */
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.al-schedule-cookie-link {
    color: var(--al-secondary); /* text-Secondary */
}

.al-schedule-report-link {
    color: var(--al-text-dark); /* text-zinc-900 */
}

.al-schedule-footer-link:hover {
    text-decoration: underline;
}


/* ============================================
   RIGHT PANEL - Calendly Widget
   ============================================ */
.al-schedule-right {
    flex: 1;
    min-width: 0;
    padding: 28px 28px 0 28px !important; /* Top/sides padding, no bottom */
    border-left: var(--al-border-width) solid var(--al-border-light);
    display: flex;
    flex-direction: column;
    gap: 0 !important; /* NO gap */
}

/* Header - "Select a Date & Time" or "Enter details" */
.al-schedule-right-header {
    padding: 0 0 16px 0 !important;
    margin: 0 !important;
}

.al-schedule-step-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px;
    font-weight: 400;
    font-family: var(--al-font-primary);
    color: var(--al-text-dark);
    line-height: 1.4;
}

/* Calendly Widget - NO SPACING */
.al-schedule-calendly-wrapper {
    flex: 1;
    min-height: 480px;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.al-schedule-calendly-wrapper .calendly-inline-widget {
    width: 100% !important;
    height: 100% !important;
    min-height: 480px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.al-schedule-calendly-wrapper .calendly-inline-widget iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 480px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* ============================================
   REMOVE CALENDLY CONTAINER SHADOW
   ============================================ */
.al-schedule-calendly-wrapper,
.al-schedule-calendly-wrapper *,
.al-schedule-calendly-wrapper .calendly-inline-widget,
.calendly-inline-widget,
.calendly-inline-widget > div,
.calendly-inline-widget iframe,
[class*="calendly"] {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* Target Calendly's internal shadow containers */
.calendly-inline-widget div[style*="box-shadow"],
.calendly-inline-widget div[style*="shadow"] {
    box-shadow: none !important;
}


/* ============================================
   TROUBLESHOOTING BUTTON - EXACT FIGMA SPECS
   border-radius: 996.503px
   border: 0.998px solid #1A1A1A
   padding: 11.97px 15.96px
   gap: 22.4px (adjusted)
   ============================================ */
.al-schedule-troubleshoot {
    padding: 16px 28px 28px 28px !important; /* Add padding for spacing */
    margin: 0 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.al-schedule-troubleshoot.is-hidden {
    opacity: 0;
    visibility: hidden;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.al-schedule-troubleshoot-btn,
button.al-schedule-troubleshoot-btn,
.al-schedule-troubleshoot .al-schedule-troubleshoot-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 22.4px !important; /* FORCED gap */
    gap: 22.4px !important; /* FORCED gap */
    padding: 11.97px 15.96px !important; /* EXACT Figma */
    background: transparent !important;
    border: 0.998px solid #1A1A1A !important; /* EXACT Figma */
    border-radius: 996.503px !important; /* EXACT Figma */
    cursor: pointer;
    font-family: var(--al-font-primary);
    transition: background 0.2s ease;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.al-schedule-troubleshoot-btn:hover {
    background: rgba(26, 26, 26, 0.05) !important;
}

.al-schedule-troubleshoot-btn:focus {
    outline: none;
}

.al-schedule-troubleshoot-btn > .troubleshoot-icon,
.troubleshoot-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    position: relative;
    overflow: hidden;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.troubleshoot-icon svg {
    width: 14px !important;
    height: 14px !important;
}

.troubleshoot-icon svg circle,
.troubleshoot-icon svg path {
    stroke: #1A1A1A !important;
    stroke-width: 1.28px !important;
}

.al-schedule-troubleshoot-btn > .troubleshoot-text,
.troubleshoot-text {
    font-size: 14px !important; /* text-sm */
    font-weight: 400 !important;
    font-family: var(--al-font-primary) !important;
    color: #1A1A1A !important; /* zinc-900 */
    line-height: 1.43 !important; /* leading-5 */
    white-space: nowrap;
}


/* ============================================
   CONTACT ALTERNATIVE (Below Card)
   ============================================ */
.al-schedule-contact-alt {
    max-width: var(--al-card-width);
    margin: 20px auto 0;
    text-align: center;
}

.al-schedule-contact-alt p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--al-font-primary);
    color: var(--al-text-muted);
    line-height: 1.5;
}

.al-schedule-contact-alt a {
    color: var(--al-primary);
    text-decoration: none;
    font-weight: 500;
}

.al-schedule-contact-alt a:hover {
    text-decoration: underline;
}


/* ============================================
   HIDE CALENDLY ELEMENTS WE DON'T WANT
   - "Please share anything..." label and textarea
   - Calendly branding
   - But data still passes via URL param 'a1'
   ============================================ */

/* Hide the custom question field (textarea) */
.calendly-inline-widget [data-component="spot-form-custom-question"],
.calendly-inline-widget [class*="custom-question"],
.calendly-inline-widget [class*="CustomQuestion"],
.calendly-inline-widget [class*="customQuestion"],
.calendly-inline-widget textarea,
.calendly-inline-widget [class*="TextArea"],
.calendly-inline-widget [class*="textarea"],
.calendly-inline-widget label[for*="custom"],
.calendly-inline-widget label[for*="question"],
.calendly-inline-widget div[class*="question"]:has(textarea) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Alternative: Hide by text content detection via CSS */
/* This targets labels containing "Please share" */
.calendly-inline-widget label:has(+ textarea),
.calendly-inline-widget div:has(> label):has(> textarea) {
    display: none !important;
}

/* Hide Calendly branding */
.calendly-inline-widget .calendly-badge-widget,
.calendly-inline-widget .calendly-branding,
.calendly-inline-widget [class*="branding"],
.calendly-badge-widget {
    display: none !important;
    visibility: hidden !important;
}

.calendly-inline-widget a[href*="calendly.com/powered-by"],
[class*="calendly"] a[href*="powered-by"] {
    display: none !important;
}


/* ============================================
   RESPONSIVE - TABLET (1024px)
   ============================================ */
@media (max-width: 1024px) {
    :root {
        --al-left-width: 100%;
        --al-content-width: 100%;
    }
    
    .al-schedule-card {
        flex-direction: column;
        min-height: auto;
    }
    
    .al-schedule-left {
        width: 100%;
        min-width: 100%;
        border-bottom: var(--al-border-width) solid var(--al-border-light);
        padding: 24px;
    }
    
    .al-schedule-header,
    .al-schedule-details,
    .al-schedule-description,
    .al-schedule-left-footer {
        width: 100%;
        max-width: 480px;
    }
    
    .al-schedule-right {
        border-left: none;
        padding: 24px;
    }
    
    .al-schedule-right-header {
        width: 100%;
    }
}


/* ============================================
   RESPONSIVE - MOBILE (768px)
   ============================================ */
@media (max-width: 768px) {
    :root {
        --al-padding-card: 20px;
        --al-border-radius: 12px;
    }
    
    .al-schedule-container {
        padding: 16px;
    }
    
    .al-schedule-title {
        font-size: 24px;
    }
    
    .al-schedule-calendly-wrapper,
    .al-schedule-calendly-wrapper .calendly-inline-widget,
    .al-schedule-calendly-wrapper .calendly-inline-widget iframe {
        min-height: 450px !important;
    }
}


/* ============================================
   RESPONSIVE - SMALL MOBILE (480px)
   ============================================ */
@media (max-width: 480px) {
    :root {
        --al-padding-card: 16px;
        --al-border-radius: 8px;
    }
    
    .al-schedule-container {
        padding: 12px;
    }
    
    .al-schedule-title {
        font-size: 22px;
    }
    
    .al-schedule-step-title {
        font-size: 18px;
    }
    
    .al-schedule-troubleshoot-btn {
        width: 100%;
        justify-content: center;
    }
    
    .al-schedule-left-footer {
        flex-direction: column;
        gap: 8px;
    }
}


/* ============================================
   PROXIMA NOVA FONT FACE (if not loaded globally)
   ============================================ */
/* Uncomment if you need to load Proxima Nova locally
@font-face {
font-display:swap;
    font-family: 'Proxima Nova';
    src: url('/wp-content/themes/hello-biz/assets/css/../fonts/ProximaNova-Regular.woff2') format('woff2'),
         url('/wp-content/themes/hello-biz/assets/css/../fonts/ProximaNova-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
font-display:swap;
    font-family: 'Proxima Nova';
    src: url('/wp-content/themes/hello-biz/assets/css/../fonts/ProximaNova-Semibold.woff2') format('woff2'),
         url('/wp-content/themes/hello-biz/assets/css/../fonts/ProximaNova-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
*/