/* ==========================================================
   SONI COSMETICS – CONTACT US PAGE
   Colors: logo copper + black + white (uses variables from common-style.css)
   ========================================================== */


/* ---------- Shared bits ---------- */
.soni-contact-eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--primary);
}
.soni-contact-eyebrow--light { color: var(--accent); }

/* ---------- 1. Intro ---------- */
.soni-contact-intro { text-align: center; padding: 10px 0 46px; }
.soni-contact-heading {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-dark);
}
.soni-contact-heading span { color: var(--primary); }
.soni-contact-lead {
    max-width: 640px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 29px;
    color: var(--text-muted);
}

/* ---------- 2. Info cards ---------- */
.soni-contact-cards-wrap { padding-bottom: 70px; }
.soni-contact-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.soni-contact-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 28px 30px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.soni-contact-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}
.soni-contact-card:hover {
    transform: translateY(-6px);
    border-color: rgba(176, 111, 63, .45);
}
.soni-contact-card:hover::before { transform: scaleX(1); }

.soni-contact-card__icon {
    width: 58px; height: 58px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
    border-radius: 50%;
    background: rgba(176, 111, 63, .1);
    color: var(--primary);
    transition: background .3s ease, color .3s ease;
}
.soni-contact-card:hover .soni-contact-card__icon { background: var(--primary); color: var(--white); }
.soni-contact-card__icon svg,
.soni-contact-hours svg,
.soni-contact-social svg {
    width: 25px; height: 25px;
    fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.soni-contact-card__title {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 700;
    color: var(--text-dark);
}
.soni-contact-card__text {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 25px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}
.soni-contact-card__text a { color: var(--text-dark); text-decoration: none; }
.soni-contact-card__text a:hover { color: var(--primary); }
.soni-contact-card__link {
    margin-top: auto;
    position: relative;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    text-decoration: none;
}
.soni-contact-card__link::after {
    content: "";
    position: absolute; left: 0; bottom: -5px;
    width: 100%; height: 1px;
    background: var(--primary);
    transform-origin: left;
    transition: transform .3s ease;
}
.soni-contact-card__link:hover { color: var(--danger); }

/* ---------- 3. Enquiry (panel + form) ---------- */
.soni-contact-enquiry { padding-bottom: 80px; }
.soni-contact-split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
 }

/* Black panel */
.soni-contact-panel {
    position: relative;
    padding: 54px 44px;
    color: var(--white);
    background:
        radial-gradient(420px 260px at 0% 0%, rgba(176, 111, 63, .45), transparent 70%),
        radial-gradient(360px 260px at 100% 100%, rgba(176, 111, 63, .3), transparent 70%),
        var(--secondary);
}
.soni-contact-panel__title {
    margin: 0 0 14px;
    font-family: var(--font-heading);
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.25;
    color: var(--white);
}
.soni-contact-panel__text { margin: 0 0 26px; color: var(--text-light); font-size: 15px; line-height: 27px; }
.soni-contact-panel__list { list-style: none; margin: 0 0 30px; padding: 0; }
.soni-contact-panel__list li {
    position: relative;
    padding: 9px 0 9px 24px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .88);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.soni-contact-panel__list li::before {
    content: "";
    position: absolute; left: 2px; top: 50%;
    width: 7px; height: 7px;
    margin-top: -3px;
    background: var(--accent);
    transform: rotate(45deg);
}
.soni-contact-hours {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 18px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 4px;
    background: rgba(255, 255, 255, .05);
    color: var(--accent);
}
.soni-contact-hours svg { flex: none; width: 28px; height: 28px; }
.soni-contact-hours strong { display: block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--white); }
.soni-contact-hours span { font-size: 14px; color: var(--text-light); }

.soni-contact-social { display: flex; gap: 12px; }
.soni-contact-social a {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    color: var(--white);
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.soni-contact-social a:hover { background: var(--primary); border-color: var(--primary); color: var(--white); transform: translateY(-3px); }
.soni-contact-social svg { width: 20px; height: 20px; }

/* Form side */
.soni-contact-form { padding: 54px 48px; background: var(--white); }
.soni-contact-form__title {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 700;
    color: var(--text-dark);
}
.soni-contact-form__sub { margin: 0 0 28px; color: var(--text-muted); font-size: 15px; }

/* Contact Form 7 styling */
.soni-contact-form .wpcf7 p { margin: 0 0 18px; }
.soni-contact-form .wpcf7 br { display: none; }
.soni-contact-form .wpcf7 label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dark);
}
.soni-contact-form .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
/* Row 1: Name + Phone | Row 2: Email + Enquiry Type */
.soni-contact-form .soni-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
/* CF7 wraps fields in <p>; display: contents lets each label become a grid cell */
.soni-contact-form .soni-form-grid p { display: contents; margin: 0; }
.soni-contact-form .soni-form-grid label { margin-bottom: 18px; min-width: 0; }

.soni-contact-form input[type="text"],
.soni-contact-form input[type="email"],
.soni-contact-form input[type="tel"],
.soni-contact-form input[type="url"],
.soni-contact-form select,
.soni-contact-form textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-dark);
    background: #FFFFFF;
    border: 1px solid rgba(13, 13, 13, .2);
    border-radius: 10px;
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.soni-contact-form textarea { height: 100px; resize: vertical; }

/* Fully rounded (pill) fields - message box stays as it is */
.soni-contact-form input[type="text"],
.soni-contact-form input[type="email"],
.soni-contact-form input[type="tel"],
.soni-contact-form input[type="url"],
.soni-contact-form select {
    height: 52px;
    padding: 0 24px;
    border-radius: 50px;
}
.soni-contact-form select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 50px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B06F3F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 22px center;
}
.soni-contact-form input:focus,
.soni-contact-form select:focus,
.soni-contact-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(176, 111, 63, .15);
}
.soni-contact-form ::placeholder { color: rgba(13, 13, 13, .4); }

.soni-contact-form input[type="submit"],
.soni-contact-form .wpcf7-submit {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px;
    padding: 14px 44px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 30px;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease;
}
.soni-contact-form input[type="submit"]:hover,
.soni-contact-form .wpcf7-submit:hover { background: var(--secondary); border-color: var(--secondary); }

.soni-contact-form .wpcf7-not-valid-tip { margin-top: 6px; font-size: 12.5px; color: var(--danger); }
.soni-contact-form .wpcf7-response-output {
    margin: 20px 0 0 !important;
    padding: 12px 16px !important;
    font-size: 14px;
    border: 1px solid var(--primary) !important;
    border-radius: 2px;
}
.soni-contact-form .wpcf7-spinner { margin-left: 12px; }

/* ---------- 4. Map ---------- */
.soni-contact-map { padding-bottom: 80px; }
.soni-contact-map__wrap { position: relative; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
/* The map is pushed up inside its box so Google's default info box
   (name + address, top-left) is cropped out. Only our custom card shows.
   Increase --map-crop if the Google box is still visible. */
.soni-contact-map__view {
    --map-h: 460px;
    --map-crop: 180px;
    position: relative;
    height: var(--map-h);
    overflow: hidden;
}
.soni-contact-map__frame {
    position: absolute;
    left: 0;
    top: calc(var(--map-crop) * -1);
    display: block;
    width: 100%;
    height: calc(var(--map-h) + var(--map-crop));
    border: 0;
    filter: grayscale(100%) contrast(1.05);
}
.soni-contact-map__card {
    position: absolute;
    left: 40px; top: 50%;
    transform: translateY(-50%);
    width: 340px;
    padding: 30px 28px;
    background: var(--white);
    border-top: 3px solid var(--primary);
    border-radius: 2px;
    box-shadow: 0 18px 44px rgba(13, 13, 13, .25);
}
.soni-contact-map__card h3 { margin: 0 0 10px; font-size: 22px; }
.soni-contact-map__card p:not(.soni-contact-eyebrow) { margin: 0 0 20px; font-size: 14.5px; line-height: 25px; color: var(--text-muted); }
/* Keep the common button text visible inside the card */
.soni-contact-map__card .common-btn,
.soni-contact-map__card .common-btn:visited {border-radius: 30px; color: var(--white); text-decoration: none; }
.soni-contact-map__card .common-btn:hover,
.soni-contact-map__card .common-btn:focus { color: var(--white); background: var(--secondary); border-color: var(--secondary); }

/* ---------- 5. Call strip ---------- */
.soni-contact-cta {
    padding: 46px 0;
    background:
       radial-gradient(420px 260px at 0% 0%, rgba(176, 111, 63, .45), transparent 70%),
        radial-gradient(360px 260px at 100% 100%, rgba(176, 111, 63, .3), transparent 70%),
        var(--secondary);
}
.soni-contact-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.soni-contact-cta h2 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 30px); color: var(--white); }
.soni-contact-cta p { margin: 0; color: rgba(255, 255, 255, .88); }
.soni-contact-cta__btn {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 54px;
    padding: 14px 38px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--primary);
    background: var(--white);
    border: 2px solid var(--white);
    border-radius: 30px;
    transition: all .3s ease;
}
.soni-contact-cta__btn:hover { background: var(--secondary); border-color: var(--secondary); color: var(--white); }

/* ---------- Entrance animation ---------- */
@keyframes soniContactUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.soni-contact-intro .container,
.soni-contact-card,
.soni-contact-split { animation: soniContactUp .7s ease both; }
.soni-contact-card:nth-child(2) { animation-delay: .1s; }
.soni-contact-card:nth-child(3) { animation-delay: .2s; }
.soni-contact-card:nth-child(4) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
    .soni-contact-intro .container, .soni-contact-card, .soni-contact-split { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .soni-contact-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .soni-contact-split { grid-template-columns: 1fr; }
    .soni-contact-panel, .soni-contact-form { padding: 40px 30px; }
    .soni-contact-cta__inner { flex-direction: column; text-align: center; }
}
@media (max-width: 767px) {
    .soni-contact-cards { grid-template-columns: 1fr; gap: 18px; }
    .soni-contact-cards-wrap, .soni-contact-enquiry, .soni-contact-map { padding-bottom: 50px; }
    .soni-contact-form .soni-form-grid { grid-template-columns: 1fr; }
    .soni-contact-map__view { --map-h: 320px; --map-crop: 170px; }
    .soni-contact-map__card {
        position: static;
        transform: none;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
    }
    .soni-contact-panel, .soni-contact-form { padding: 32px 22px; }
    .soni-contact-cta__btn { width: 100%; }
}