/**
 * Fosters Conversational Form Widget Styles
 */

/* Widget Container - Full Screen */
#fosters-form-widget {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* tracks mobile browser chrome; 100vh above is the fallback */
    z-index: 9999;
    padding: 40px;
    background: #FAFAFA;
    touch-action: manipulation; /* no double-tap zoom inside the widget */
}

/* Lock page scroll behind the open widget */
body.fosters-widget-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Hide widget by default */
#fosters-form-widget.fosters-form-closed {
    display: none;
}

/* Toggle Button - Floating */
.fosters-form-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #1e153d;
    border: 2px solid var(--color-teal, #4fbebe);
    color: white;
    cursor: pointer;
    /* Rainbow glow (ported from the header .site-header__william-circle) */
    box-shadow: -4px 0 10px 0 rgba(79, 190, 190, 0.5), 4px 0 10px 0 rgba(77, 78, 185, 0.5);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}

/* Soft rainbow halo ring */
.fosters-form-toggle::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--color-teal, #4fbebe);
    opacity: 0.3;
    box-shadow: -6px 0 15px 0 var(--color-teal, #4fbebe), 6px 0 15px 0 #4d4eb9;
    pointer-events: none;
}

.fosters-form-toggle:hover {
    transform: scale(1.1);
    box-shadow: -6px 0 16px 0 rgba(79, 190, 190, 0.65), 6px 0 16px 0 rgba(77, 78, 185, 0.65);
}

/* Hide toggle when widget is open */
.fosters-form-toggle.fosters-hidden {
    display: none;
}

/* Widget Window - Full Screen Layout */
.fosters-form-window {
    width: 100%;
    height: 100%;
    background: #FAFAFA;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 32px;
    box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.10);
}

/* Header - Hero Section */
/* .fosters-form-header {
    background: transparent;
    color: #1a1a2e;
    padding: 60px 20px 40px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.fosters-form-header h3 {
    margin: 0 0 20px 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a2e;
}

.fosters-form-header h3::before {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background-image: url('/wp-content/uploads/2025/12/cropped-cropped-favicon.png');
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(30, 21, 61, 0.3);
} */

.fosters-form-subtitle {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
    font-weight: 400;
}

.fosters-form-close {
    position: absolute;
    top: 70px;
    right: 70px;
    border: none;
    color: #000;
    transition: all 0.2s;
    padding: 0 !important;
    background: transparent;
    cursor: pointer;
    /* Above the messages layer (position:relative, later in DOM) so it stays
       clickable; below the submitted overlay (z-index: 10) */
    z-index: 5;
}

.fosters-form-close svg {
    width: 30px;
    height: 30px;
}

.fosters-form-close:hover {
    background: 0;
    color: #000;
    scale: 1.2;
}

/* Messages Area - Centered Container */
.fosters-form-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    scrollbar-width: none;
}

/* Introduction Message */
.fosters-intro-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 300px;
    animation: fadeIn 0.5s ease;
    height: 100%;
    max-width: 800px;
    position: absolute;
    width: 100%;
}

.fosters-intro-greeting {
    font-family: var(--font-heading);
   font-size: var(--fs-h2);
    font-weight: var(--fw-h2);
    color: var(--color-text);
    margin-bottom: 20px;
    line-height: var(--lh-h2);
}

.fosters-intro-subtext {
   font-size: var(--fs-body-s);
    color: var(--color-text);
    line-height: var(--lh-body-s);
    max-width: 500px;
    font-weight: var(--fw-body-s);
}

.fosters-intro-fadeout {
    animation: fadeOut 0.5s ease forwards;
}

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

.fosters-form-message {
    margin-bottom: 32px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fosters-form-message-content {
    padding: 12px 24px;
    border-radius: 16px;
    max-width: 100%;
    word-wrap: break-word;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    width: fit-content;
}

.fosters-form-message-bot .fosters-form-message-content {
    background: #E8EDF6;
    color: #1E153D;
    border: none;
    position: relative;
}

/* Confirmation summary — a multi-line block reads poorly inside the pill-shaped
   chat bubble used for one-liners, so it gets a card layout instead. */
.fosters-form-message-summary .fosters-form-message-content {
    border-radius: 16px;
    line-height: 1.8;
    padding: 16px 24px;
}

.fosters-form-message-summary .fosters-form-message-content strong {
    font-weight: 600;
}

.fosters-form-message-bot .fosters-form-message-content::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 1px;
    width: 30px;
    height: 13px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='13' viewBox='0 0 30 13' fill='none'><path d='M0 13C5.76889 9.39895 10.4797 7.3422 10 0H30C21.7392 7.9693 15.9894 11.4982 0 13Z' fill='%23E8EDF6'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fosters-form-message-user .fosters-form-message-content {
    background: #4FBEBE;
    color: #1E153D;
    margin-left: auto;
    position: relative;
}

.fosters-form-message-user .fosters-form-message-content::after {
    content: '';
    position: absolute;
    bottom: -12px;
    right: 1px;
    width: 30px;
    height: 13px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='13' viewBox='0 0 30 13' fill='none'><path d='M30 13C24.2311 9.39895 19.5203 7.3422 20 0H0C8.26084 7.9693 14.0106 11.4982 30 13Z' fill='%234FBEBE'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fosters-form-message-user {
    display: flex;
    justify-content: flex-end;
}

/* Typing Indicator */
.fosters-form-typing {
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

.fosters-form-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #999;
    margin: 0 2px;
    animation: typing 1.4s infinite;
}

.fosters-form-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.fosters-form-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* Chips Area Container */
.fosters-form-chips-area {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding: 0 0px 16px;
    min-height: 0;
    transition: min-height 0.3s ease;
}

.fosters-form-chips-area:not(:empty) {
    min-height: 60px;
}

/* Quick Reply Chips */
.fosters-form-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}

.fosters-form-chip {
    background: #fff;
    border: 0;
    color: #1E153D;
    transition: all 0.3s;
    padding: 12px 24px;
    border-radius: 999px;
    box-shadow: var(--shadow-1);
    font-size: var(--fs-body-s);
    font-weight: var(--fw-body-s);
    cursor: pointer;
}

/* Scoped to true hover-capable pointers (mouse/trackpad) only. Touchscreens
   synthesize :hover on tap with no matching "leave" event, so a chip freshly
   rendered at the same screen position as the just-tapped one would otherwise
   inherit a stuck hover state on mobile. */
@media (hover: hover) and (pointer: fine) {
    .fosters-form-chip:hover:not(.fosters-chip-disabled):not(.fosters-chip-selected) {
        background: #1e153d;
        color: white;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(30, 21, 61, 0.3);
    }
}

/* Selected chip state */
.fosters-form-chip.fosters-chip-selected {
    background: #1e153d;
    color: white;
    border-color: #1e153d;
    cursor: default;
}

/* Disabled chip state */
.fosters-form-chip.fosters-chip-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Success message styling */
.fosters-form-message-bot.fosters-form-message-success .fosters-form-message-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) !important;
}

/* Submission Confirmation Screen */
.fosters-form-submitted {
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 80px 40px;
    z-index: 10;
    animation: fadeIn 0.4s ease;
}

.fosters-form-submitted.fosters-hidden {
    display: none;
}

.fosters-submitted-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 700px;
    text-align: center;
}

.fosters-submitted-heading {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-h2);
    line-height: var(--lh-h2);
    color: var(--color-text);
    margin: 0;
}

.fosters-submitted-subheading {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    letter-spacing: 0.03em;
}

.fosters-submitted-body {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

.fosters-submitted-actions {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-top: 8px;
}

.fosters-submitted-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-teal, #4FBEBE);
    color: var(--color-text, #1E153D);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    padding: 12px 24px;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    justify-content: center;
}

.fosters-submitted-btn-primary:hover {
    opacity: 0.85;
    color: var(--color-text, #1E153D);
}

.fosters-submitted-btn-secondary {
    display: inline-flex;
    align-items: center;
    background: #E8EDF6;
    color: var(--color-text, #1E153D);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    padding: 12px 24px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    justify-content: center;
}

.fosters-submitted-btn-secondary:hover {
    opacity: 0.8;
}

.fosters-submitted-close {
    position: absolute;
    top: 40px;
    right: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--color-text, #1E153D);
    transition: scale 0.2s;
}

.fosters-submitted-close:hover {
    scale: 1.2;
}

/* Input Area - Centered at Bottom */
.fosters-form-input {
    padding: 16px;
    background: #fff;
    display: flex;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    height: 150px;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 6px 0 20px 0 rgba(77, 78, 185, 0.20), -6px 0 20px 0 rgba(79, 190, 190, 0.20);
    align-items: flex-end;
    flex-direction: column;
    justify-content: space-between;
}

#fosters-form-input-field {
    flex: 1;
    padding: 8px 12px;
    border: 0;
    border-radius: 30px;
    outline: none;
    transition: all 0.3s;
    background: transparent;
    width: 100%;
    resize: none;
    overflow-y: auto;
    vertical-align: top;
    font-family: var(--font-body);
    font-size: var(--fs-body-s);
    font-weight: var(--fw-body-s);
}

#fosters-form-input-field:focus {


}

#fosters-form-disclaimer {
    text-align: center;
    font-size: 16px;
    color: var(--color-text);
    margin: 0px auto 20px;
    max-width: 800px;
    width: 100%;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.4s ease, margin 0.4s ease;
    max-height: 100px;
    font-family: var(--font-heading);
    font-weight: var(--fw-h3);
}

#fosters-form-disclaimer span {
    color: var(--color-teal);
}

/* The disclaimer stays visible at all times (client requirement). The JS still
   toggles .fosters-hidden on it at various points, but we intentionally do NOT
   hide it here so it remains on display throughout the conversation. */
   #fosters-form-disclaimer.fosters-hidden {
     font-size: 12px;
   }

#fosters-form-send {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #4FBEBE;
    border: none;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    padding: 0;
}

button#fosters-form-send:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 7px rgba(30, 21, 61, 0.3);
}

#fosters-form-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Progress Indicator */
.fosters-form-progress {
    text-align: center;
    padding: 10px 20px;
    font-size: 13px;
    color: #999;
}

.fosters-form-progress-bar {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
    margin: 10px auto;
    max-width: 400px;
}

.fosters-form-progress-fill {
    height: 100%;
    background: #1e153d;
    transition: width 0.3s ease;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .fosters-form-header {
        padding: 40px 20px 30px;
    }
    
    .fosters-form-header h3 {
        font-size: 32px;
    }
    
    .fosters-form-header h3::before {
        width: 48px;
        height: 48px;
    }
    
    .fosters-form-subtitle {
        font-size: 14px;
    }
    
    .fosters-form-input {
        padding: 20px 15px;
    }
    
    .fosters-form-chips {
        gap: 8px;
    }
    
    .fosters-form-chip {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* Introduction message mobile styles */
    .fosters-intro-message {
       padding: 40px 20px 40px 0;
        min-height: 250px;
    }
    
    .fosters-intro-greeting {
        font-size: 28px;
        margin-bottom: 16px;
    }
    
    .fosters-intro-subtext {
        font-size: 14px;
        max-width: 100%;
    }
}

/* Scrollbar Styling */
.fosters-form-messages::-webkit-scrollbar {
    width: 6px;
}

.fosters-form-messages::-webkit-scrollbar-track {
    background: transparent;
}

.fosters-form-messages::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.fosters-form-messages::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Shortcode Enquiry Input Styles */
.fosters-enquiry-input-wrapper {
    width: 100%;
    margin: 0 auto;
}

.fosters-enquiry-input-form {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 50px;
    padding: 8px 8px 8px 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    width: 100%;
    position: relative;
}

.fosters-enquiry-input-form::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 3px;
    border-radius: inherit;
    background: linear-gradient(135deg, #29f5ea, #6200ee);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.fosters-enquiry-input-form::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 3px;
    /* border thickness */
    border-radius: inherit;

    background: conic-gradient(from var(--angle, 0deg),
            #29f5ea,
            #6200ee,
            #29f5ea);

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.fosters-enquiry-input-form:focus-within::before{
    opacity: 0;
}

.fosters-enquiry-input-form:focus-within::after {
    opacity: 1;
    animation: rotateGradient 8s linear infinite;
}

.fosters-enquiry-input-form:focus-within {
     box-shadow: -6px 0 30px 0 rgba(79, 190, 190, 0.20), 6px 0 30px 0 rgba(77, 78, 185, 0.20);
}



@property --angle {
  syntax: '<angle>';
  initial-value: 180deg;
  inherits: true;
}
@keyframes rotateGradient {
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 360deg;
  }
}


.fosters-enquiry-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 0;
    flex-shrink: 0;
}

.fosters-enquiry-input-icon svg {
    display: none;
}

.fosters-enquiry-input-icon::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='31' viewBox='0 0 32 31' fill='none'%3E%3Cmask id='mask0_1474_4305' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='31' height='31'%3E%3Crect width='30.9436' height='30.9415' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1474_4305)'%3E%3Cpath d='M25.2708 27.0741L17.1481 18.9519C16.5035 19.4676 15.7621 19.8759 14.924 20.1767C14.086 20.4775 13.1942 20.6279 12.2487 20.6279C9.90646 20.6279 7.92413 19.8168 6.30175 18.1945C4.67936 16.5722 3.86816 14.59 3.86816 12.2479C3.86816 9.90582 4.67936 7.92363 6.30175 6.30134C7.92413 4.67906 9.90646 3.86792 12.2487 3.86792C14.591 3.86792 16.5733 4.67906 18.1957 6.30134C19.8181 7.92363 20.6293 9.90582 20.6293 12.2479C20.6293 13.1934 20.4788 14.0851 20.178 14.9231C19.8772 15.7611 19.4689 16.5024 18.9531 17.147L27.0758 25.2692L25.2708 27.0741ZM12.2487 18.0495C13.8604 18.0495 15.2303 17.4854 16.3584 16.3573C17.4866 15.2293 18.0506 13.8595 18.0506 12.2479C18.0506 10.6364 17.4866 9.26657 16.3584 8.1385C15.2303 7.01042 13.8604 6.44638 12.2487 6.44638C10.6371 6.44638 9.26717 7.01042 8.13902 8.1385C7.01087 9.26657 6.44679 10.6364 6.44679 12.2479C6.44679 13.8595 7.01087 15.2293 8.13902 16.3573C9.26717 17.4854 10.6371 18.0495 12.2487 18.0495Z' fill='%231C1B1F'/%3E%3C/g%3E%3Cpath d='M21.4149 7.58681C18.1546 6.81912 16.8248 5.87134 16.063 2.43004C15.996 2.12733 15.429 2.13937 15.3748 2.44463C14.761 5.9033 13.446 6.76344 9.83926 7.60089C9.56777 7.66393 9.56389 8.06913 9.83318 8.14101C13.4518 9.10696 14.6037 10.3669 15.3052 13.589C15.3701 13.8872 15.907 13.8786 15.9691 13.5798C16.6349 10.3735 18.1047 9.00592 21.4182 8.14348C21.6918 8.07229 21.69 7.65159 21.4149 7.58681Z' fill='%234FBEBE'/%3E%3Cpath d='M30.5946 15.2986C28.9036 14.7925 28.2259 14.0339 27.6768 11.9694C27.6015 11.6864 27.1313 11.6991 27.0663 11.9847C26.5909 14.0733 25.7787 14.8899 24.0509 15.3529C23.7727 15.4274 23.7636 15.8826 24.0406 15.9615C25.8744 16.4841 26.6221 17.2058 27.0741 19.2813C27.1364 19.5675 27.5965 19.5798 27.6685 19.2959C28.2009 17.1971 28.8284 16.3945 30.5847 15.9213C30.8638 15.8461 30.8715 15.3815 30.5946 15.2986Z' fill='%234FBEBE'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.fosters-enquiry-input-field {
    flex: 1;
    border: none !important;
    outline: none;
    padding: 12px 16px;
    font-size: 16px;
    background: transparent;
    color: #333;
}

.fosters-enquiry-input-field::placeholder {
    color: #999;
}

button.fosters-enquiry-input-button {
    background: #34BFBF;
    color: #1E153D;
    border: none;
    font-weight: 400 !important;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

button.fosters-enquiry-input-button:hover {
    background: #34BFBF;
    color: #1E153D;
    box-shadow: 0px 0 12px 0 rgba(79, 190, 190, 0.60);
}

@media (max-width: 1024px){
.fosters-form-window {
    padding: 40px;
}

.fosters-form-input {
    margin-bottom: 0;
}

}


/* Mobile responsive for shortcode input */
@media (max-width: 767px) {

        #fosters-form-widget {
        padding: 0;
    }
    .fosters-form-window {
            padding: 16px 0 16px 16px;
            border-radius: 0; /* true full-screen — no page corners showing through */
            box-shadow: none;
    }

    .fosters-form-close {
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(250, 250, 250, 0.92);
        border-radius: 50%;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    }

    .fosters-form-close svg {
        width: 22px;
        height: 22px;
    }

    /* Start content below the close button so bubbles don't sit under it */
    .fosters-form-messages {
        padding: 64px 16px 0 0;
    }

    /* Chips scroll horizontally in a single row instead of stacking */
    .fosters-form-chips-area {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .fosters-form-chips-area::-webkit-scrollbar {
        display: none;
    }

    .fosters-form-chips {
        flex-wrap: nowrap;
        width: max-content;
        padding-right: 16px;
        margin: 5px;
    }

    .fosters-form-chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Compact single-row composer: textarea inline with the send button.
       The button bottom-aligns so it stays put while the textarea grows. */
    .fosters-form-input {
        height: auto;
        min-height: 0;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        padding: 8px;
        border-radius: 12px;
        margin-bottom: 10px;
    }
    .fosters-form-input-wrapper {
    padding-right: 16px;
}

    /* 16px minimum stops iOS zooming the page when the field is focused */
    #fosters-form-input-field {
        font-size: 16px;
        padding: 0;
        line-height: 1.35;
        border-radius: 0;
    }

    #fosters-form-send {
        width: 38px;
        height: 38px;
    }

    #fosters-form-send svg {
        width: 13px;
        height: 13px;
    }

    #fosters-form-disclaimer {
        font-size: 13px;
        margin: 6px auto 10px;
        padding-right: 16px;
    }

    .fosters-enquiry-input-form {
        padding: 6px 10px 6px 12px;
    }

    .fosters-enquiry-input-icon {
        width: 36px;
        height: 36px;
        margin-right: 10px;
    }

    .fosters-enquiry-input-icon svg {
        width: 18px;
        height: 18px;
    }

    .fosters-enquiry-input-field {
        font-size: 16px; /* was 15px — under 16px triggers iOS focus zoom */
        padding: 10px 12px;
    }

    .fosters-enquiry-input-button {
        padding: 10px 20px;
        font-size: 14px;
    }

    .fosters-form-submitted {
        padding: 0 20px;
    }

    .fosters-submitted-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .fosters-submitted-actions .fosters-submitted-btn-primary, .fosters-submitted-btn-secondary {
        width: 100%;
    }


}

/* Respect the OS-level reduced-motion preference — neutralises every animation/
   transition in this file (fadeIn/fadeOut messages, the typing dots, the
   rotating gradient border, chip/button hover transitions, etc.) rather than
   hand-editing each individual rule. Scoped to this plugin's own root
   containers only — form.css loads site-wide, and a bare `*` selector would
   reach into the surrounding theme's own animations, which isn't this
   plugin's place to touch. */
@media (prefers-reduced-motion: reduce) {
    #fosters-form-widget, #fosters-form-widget *,
    .fosters-enquiry-input-wrapper, .fosters-enquiry-input-wrapper * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}