/**
 * HSD Zoned Pricing - Book Your Skip Gravity Form
 * Modern Luxury Responsive Styling (Inherits Global Theme / Open Sans Fonts)
 */

:root {
    --hsd-card-bg: #FFFFFF;
    --hsd-title-purple: #550066;
    --hsd-accent-orange: #F36D21;
    --hsd-accent-orange-hover: #D85A14;
    --hsd-text-dark: #222222;
    --hsd-text-muted: #64748B;
    --hsd-input-bg: #EEEEEE;
    --hsd-input-border: #D1D5DB;
    --hsd-input-focus: #550066;
    --hsd-notice-red: #DC2626;
    --hsd-price-blue: #2563EB;
}

/* Enforce Site's Open Sans Font Family across all form elements */
.hsd-book-your-skip-wrapper,
.hsd-book-your-skip-wrapper *,
.hsd-gf-container-embed,
.hsd-gf-container-embed *,
#gform_wrapper_2,
#gform_wrapper_2 *,
.gform_wrapper,
.gform_wrapper * {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Outer Wrapper (Padding kept hidden as per site layout requirement) */
.hsd-book-your-skip-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Luxury Card Container */
.hsd-book-your-skip-card {
    width: 100%;
    max-width: 680px;
    background: var(--hsd-card-bg);
    border-radius: 8px;
    padding: 32px 36px 30px 36px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    position: relative;
}

/* When placed inside Divi column that already provides background/padding */
.et_pb_column .hsd-book-your-skip-card,
.et_pb_text .hsd-book-your-skip-card {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 8px 0 !important;
    max-width: 100% !important;
}

/* Header Section */
.hsd-card-header-styled {
    margin-bottom: 24px;
}

.hsd-card-main-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--hsd-title-purple);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.hsd-card-accent-line {
    width: 65px;
    height: 3.5px;
    background: var(--hsd-accent-orange);
    border-radius: 2px;
    margin-top: 10px;
}

/* Sister Site & Out-of-Area Notice Box */
.hsd-sister-site-notice {
    background: #FFF7ED;
    border: 1.5px solid #FDBA74;
    border-radius: 6px;
    padding: 14px 18px;
    margin: 10px 8px 16px 8px;
    width: calc(100% - 16px);
    box-sizing: border-box;
    animation: hsdFadeIn 0.25s ease;
}

@keyframes hsdFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.hsd-sister-notice-text {
    font-size: 13.5px;
    color: #9A3412;
    line-height: 1.5;
    margin-bottom: 10px;
}

.hsd-sister-notice-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.hsd-btn-sister {
    background: var(--hsd-accent-orange) !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 4px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(243, 109, 33, 0.25) !important;
}

.hsd-btn-sister:hover {
    background: var(--hsd-accent-orange-hover) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

.hsd-sister-phone-text {
    font-size: 13px;
    color: #7C2D12;
}

.hsd-sister-phone-text a {
    color: var(--hsd-title-purple) !important;
    font-weight: 700;
    text-decoration: underline;
}

.hsd-notice-unserviced {
    background: #FEF2F2;
    border-color: #FECACA;
}

.hsd-notice-unserviced .hsd-sister-notice-text {
    color: #991B1B;
    margin-bottom: 0;
}

/* Gravity Forms General Resets */
.hsd-book-your-skip-form,
.hsd-gf-container-embed .gform_wrapper,
.gform_wrapper.hsd-book-your-skip-form_wrapper,
#gform_wrapper_2 {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.hsd-gf-container-embed .gform_title,
.hsd-gf-container-embed .gform_description,
.hsd-gf-container-embed .gf_progressbar_wrapper,
.hsd-gf-container-embed .gf_page_steps {
    display: none !important;
}

/* Field Grid List */
.hsd-gf-container-embed .gform_fields,
#gform_wrapper_2 .gform_fields {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hsd-gf-container-embed .gfield,
#gform_wrapper_2 .gfield {
    box-sizing: border-box !important;
    padding: 0 8px !important;
    margin: 0 0 6px 0 !important;
    width: 100% !important;
    clear: none !important;
}

/* 2-Column Responsive Layout */
.hsd-gf-container-embed .hsd-col-6,
.hsd-gf-container-embed .gfield--width-half,
.hsd-gf-container-embed .gfield--width-6,
#gform_wrapper_2 .hsd-col-6,
#field_2_1, #field_2_2, #field_2_4, #field_2_5,
#field_2_10, #field_2_11, #field_2_12, #field_2_14,
#field_2_13, #field_2_17, #field_2_15, #field_2_18 {
    width: 50% !important;
}

.hsd-gf-container-embed .hsd-col-12,
.hsd-gf-container-embed .gfield--width-full,
.hsd-gf-container-embed .gfield--width-12,
#gform_wrapper_2 .hsd-col-12,
#field_2_3, #field_2_6, #field_2_16 {
    width: 100% !important;
}

/* Labels */
.hsd-gf-container-embed .gfield_label,
#gform_wrapper_2 .gfield_label {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--hsd-text-dark) !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}

.hsd-gf-container-embed .gfield_required,
#gform_wrapper_2 .gfield_required {
    color: #DC2626 !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
}

/* Input Fields & Select Dropdowns (Light Grey Box Styling matching site) */
.hsd-gf-container-embed input[type="text"],
.hsd-gf-container-embed input[type="email"],
.hsd-gf-container-embed input[type="tel"],
.hsd-gf-container-embed input[type="url"],
.hsd-gf-container-embed input[type="number"],
.hsd-gf-container-embed input[type="date"],
.hsd-gf-container-embed select,
.hsd-gf-container-embed textarea,
#gform_wrapper_2 input[type="text"],
#gform_wrapper_2 input[type="email"],
#gform_wrapper_2 input[type="tel"],
#gform_wrapper_2 input[type="date"],
#gform_wrapper_2 select,
#gform_wrapper_2 textarea {
    width: 100% !important;
    background: var(--hsd-input-bg) !important;
    border: 1px solid var(--hsd-input-border) !important;
    border-radius: 4px !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    color: #1F2937 !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    height: 40px !important;
    line-height: 1.4 !important;
}

.hsd-gf-container-embed textarea,
#gform_wrapper_2 textarea {
    height: 72px !important;
    resize: vertical !important;
    padding: 10px 12px !important;
}

.hsd-gf-container-embed input:focus,
.hsd-gf-container-embed select:focus,
.hsd-gf-container-embed textarea:focus,
#gform_wrapper_2 input:focus,
#gform_wrapper_2 select:focus,
#gform_wrapper_2 textarea:focus {
    border-color: var(--hsd-title-purple) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(85, 0, 102, 0.12) !important;
}

.hsd-gf-container-embed input::placeholder,
#gform_wrapper_2 input::placeholder {
    color: #9CA3AF !important;
}

/* Overweight Allowance Notice */
.hsd-overweight-notice {
    color: var(--hsd-notice-red) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 2px 0 6px 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Checkboxes (Rubbish Type & Terms) */
.hsd-gf-container-embed .gfield_checkbox,
#gform_wrapper_2 .gfield_checkbox {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin-top: 4px !important;
    list-style: none !important;
    padding: 0 !important;
}

.hsd-gf-container-embed .gchoice,
#gform_wrapper_2 .gchoice {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

.hsd-gf-container-embed .gchoice input[type="checkbox"],
#gform_wrapper_2 .gchoice input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: #2563EB !important;
    flex-shrink: 0 !important;
}

.hsd-gf-container-embed .gchoice label,
#gform_wrapper_2 .gchoice label {
    font-size: 13.5px !important;
    color: #1F2937 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Terms Checkbox */
.hsd-field-terms .gchoice label a,
#field_2_16 .gchoice label a {
    color: #2563EB !important;
    text-decoration: underline !important;
}

/* Hidden Field */
.hsd-field-calculated-price-hidden,
#field_2_7,
.hsd-estimate-html-wrapper,
#field_2_8 {
    display: none !important;
}

/* Page Footers & Actions (Responsive Flex Bar) */
.hsd-gf-container-embed .gform_page_footer,
.hsd-gf-container-embed .gform-page-footer,
#gform_wrapper_2 .gform_page_footer,
#gform_wrapper_2 .gform-page-footer {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    padding: 20px 8px 0 8px !important;
    margin-top: 14px !important;
    border-top: 1px solid #E5E7EB !important;
    box-sizing: border-box !important;
    clear: both !important;
}

/* STEP 1: Price Estimate Box in Page 1 Footer on the LEFT */
.hsd-step1-estimate-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hsd-estimate-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--hsd-notice-red) !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
}

.hsd-estimate-val-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.hsd-estimate-check-box {
    display: inline-flex !important;
    align-items: center !important;
}

.hsd-fake-checkbox {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: #2563EB !important;
    cursor: default !important;
    pointer-events: none !important;
}

.hsd-estimate-amount {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--hsd-notice-red) !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
}

/* Orange Action Buttons (Next, Previous, Submit) */
.hsd-gf-container-embed .gform_next_button,
.hsd-gf-container-embed .gform_previous_button,
.hsd-gf-container-embed .gform_button,
.hsd-gf-container-embed input[type="submit"].button,
.hsd-gf-container-embed input[type="button"].button,
#gform_wrapper_2 .gform_next_button,
#gform_wrapper_2 .gform_previous_button,
#gform_wrapper_2 .gform_button {
    background: var(--hsd-accent-orange) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 32px !important;
    height: 42px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: none !important;
    box-shadow: 0 2px 6px rgba(243, 109, 33, 0.25) !important;
    line-height: 1 !important;
}

.hsd-gf-container-embed .gform_next_button:hover,
.hsd-gf-container-embed .gform_previous_button:hover,
.hsd-gf-container-embed .gform_button:hover,
#gform_wrapper_2 .gform_next_button:hover,
#gform_wrapper_2 .gform_previous_button:hover,
#gform_wrapper_2 .gform_button:hover {
    background: var(--hsd-accent-orange-hover) !important;
    box-shadow: 0 4px 12px rgba(243, 109, 33, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Page 1: Push Next button to Right */
.gform_page:first-child .gform_page_footer .gform_next_button,
.gform_page:first-child .gform-page-footer .gform_next_button {
    margin-left: auto !important;
}

/* Page 2: Push Submit button to Right, Previous on Left */
.gform_page:nth-child(2) .gform_page_footer .gform_button,
.gform_page:nth-child(2) .gform-page-footer .gform_button {
    margin-left: auto !important;
}

/* Success Confirmation Box */
.hsd-gf-confirm-box {
    text-align: center;
    padding: 40px 24px;
    background: #F0FDF4;
    border: 1.5px solid #22C55E;
    border-radius: 8px;
    margin: 10px 0;
}

.hsd-gf-confirm-box h3 {
    font-size: 26px;
    font-weight: 800;
    color: #15803D;
    margin: 0 0 12px 0;
}

.hsd-gf-confirm-box p {
    font-size: 15px;
    color: #374151;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

/* Datepicker Popup Styling (Matches Site Brand) */
.ui-datepicker {
    background: #ffffff !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    padding: 12px !important;
    font-size: 13px !important;
    z-index: 99999 !important;
}

.ui-datepicker-header {
    background: var(--hsd-title-purple) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    border: none !important;
    padding: 8px 6px !important;
}

.ui-datepicker-title {
    font-weight: 700 !important;
    color: #ffffff !important;
}

.ui-datepicker th {
    color: var(--hsd-text-muted) !important;
    font-weight: 600 !important;
    padding: 6px !important;
}

.ui-datepicker td span,
.ui-datepicker td a {
    border-radius: 4px !important;
    text-align: center !important;
    padding: 6px 8px !important;
    font-weight: 500 !important;
    color: #1F2937 !important;
}

.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-hover {
    background: var(--hsd-accent-orange) !important;
    color: #ffffff !important;
    border-color: var(--hsd-accent-orange) !important;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES (Mobile & Tablet)
   ========================================= */
@media (max-width: 680px) {
    .hsd-book-your-skip-card {
        padding: 24px 18px 22px 18px;
        border-radius: 6px;
    }

    .hsd-card-main-title {
        font-size: 26px;
    }

    /* Stack 2-column fields to 100% full width on mobile */
    .hsd-gf-container-embed .hsd-col-6,
    .hsd-gf-container-embed .gfield--width-half,
    .hsd-gf-container-embed .gfield--width-6,
    #gform_wrapper_2 .hsd-col-6,
    #field_2_1, #field_2_2, #field_2_4, #field_2_5,
    #field_2_10, #field_2_11, #field_2_12, #field_2_14,
    #field_2_13, #field_2_17, #field_2_15, #field_2_18 {
        width: 100% !important;
    }

    /* Footer buttons & Price Estimate stack cleanly */
    .hsd-gf-container-embed .gform_page_footer,
    .hsd-gf-container-embed .gform-page-footer,
    #gform_wrapper_2 .gform_page_footer,
    #gform_wrapper_2 .gform-page-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    .hsd-step1-estimate-container {
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .hsd-step1-estimate-container .hsd-estimate-val-wrap {
        justify-content: center !important;
    }

    .hsd-gf-container-embed .gform_next_button,
    .hsd-gf-container-embed .gform_previous_button,
    .hsd-gf-container-embed .gform_button,
    #gform_wrapper_2 .gform_next_button,
    #gform_wrapper_2 .gform_previous_button,
    #gform_wrapper_2 .gform_button {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* =========================================
   THANK YOU CONFIRMATION BOX & SUMMARY CARD
   ========================================= */
.hsd-gf-confirm-box {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 30px 24px !important;
    font-family: 'Open Sans', inherit, sans-serif !important;
    text-align: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
    margin: 10px 0 !important;
}

.hsd-confirm-header {
    margin-bottom: 24px !important;
}

.hsd-confirm-badge-icon {
    width: 54px !important;
    height: 54px !important;
    background: #e6f7ec !important;
    color: #10B981 !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 12px auto !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2) !important;
}

.hsd-confirm-header h3 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--hsd-title-purple, #550066) !important;
    margin: 0 0 6px 0 !important;
}

.hsd-confirm-lead {
    font-size: 14.5px !important;
    color: #4B5563 !important;
    margin: 0 !important;
}

.hsd-booking-summary-card {
    background: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 20px 22px !important;
    text-align: left !important;
    margin: 20px auto !important;
    max-width: 620px !important;
}

.hsd-summary-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #E5E7EB !important;
    margin-bottom: 16px !important;
}

.hsd-summary-header-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.hsd-summary-hire-pill {
    background: #FFF7ED !important;
    color: #EA580C !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    border: 1px solid #FDBA74 !important;
}

.hsd-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 18px !important;
}

.hsd-summary-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.hsd-summary-item-full {
    grid-column: 1 / -1 !important;
}

.hsd-summary-label {
    font-size: 12px !important;
    color: #6B7280 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.hsd-summary-val {
    font-size: 14px !important;
    color: #1F2937 !important;
    font-weight: 500 !important;
}

.hsd-summary-val-highlight {
    font-weight: 700 !important;
    color: var(--hsd-title-purple, #550066) !important;
}

.hsd-price-highlight {
    font-size: 17px !important;
    color: var(--hsd-accent-orange, #f15a24) !important;
    font-weight: 800 !important;
}

.hsd-confirm-footer {
    margin-top: 22px !important;
    font-size: 13.5px !important;
    color: #4B5563 !important;
}

.hsd-confirm-footer strong {
    color: #111827 !important;
}

.hsd-support-call-action {
    margin-top: 10px !important;
    font-size: 13px !important;
    color: #6B7280 !important;
}

.hsd-support-call-action a {
    color: var(--hsd-accent-orange, #f15a24) !important;
    text-decoration: underline !important;
}

@media (max-width: 680px) {
    .hsd-summary-grid {
        grid-template-columns: 1fr !important;
    }
    .hsd-booking-summary-card {
        padding: 16px 14px !important;
    }
}