/* =====================================================================
   Sanya Studio — Custom Theme Extension
   Extends the original template's design language (brand green #009603,
   dark text #444/#111, Quantico/Open Sans type) to every section added
   for the dynamic site: booking, search, client portal, blog comments,
   portfolio sidebar, and testimonial cards. Fully responsive — mirrors
   the template's own breakpoints (1199 / 991 / 767 / 479).
   ===================================================================== */

:root {
    --brand: #009603;
    --brand-dark: #007a02;
    --ink: #111111;
    --text: #444444;
    --muted: #888888;
    --border: #e1e1e1;
    --bg-soft: #f5f5f5;
    --danger: #f44336;
    --radius: 6px;
}

/* ---------- Shared page containers ---------- */
.ss-section { padding: 80px 0; }
.ss-section-narrow { padding: 60px 0; }
@media (max-width: 767px) {
    .ss-section { padding: 50px 0; }
    .ss-section-narrow { padding: 36px 0; }
}

.ss-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px;
}
@media (max-width: 479px) {
    .ss-card { padding: 20px; }
}

/* ---------- Buttons (extends .primary-btn) ---------- */
.ss-btn {
    display: inline-block;
    background: var(--brand);
    color: #fff !important;
    padding: 13px 32px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background .25s;
}
.ss-btn:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }
.ss-btn-outline {
    background: transparent;
    color: var(--brand) !important;
    border: 1px solid var(--brand);
}
.ss-btn-outline:hover { background: var(--brand); color: #fff !important; }
.ss-btn-block { display: block; width: 100%; text-align: center; }
.ss-btn-sm { padding: 8px 20px; font-size: 12px; }

/* ---------- Forms ---------- */
.ss-form-group { margin-bottom: 18px; }
.ss-form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ss-form-group input[type=text],
.ss-form-group input[type=email],
.ss-form-group input[type=tel],
.ss-form-group input[type=password],
.ss-form-group input[type=date],
.ss-form-group input[type=file],
.ss-form-group select,
.ss-form-group textarea {
    width: 100%;
    padding: 13px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    background: #fff;
}
.ss-form-group textarea { min-height: 130px; resize: vertical; }
.ss-form-group input:focus,
.ss-form-group select:focus,
.ss-form-group textarea:focus {
    outline: none;
    border-color: var(--brand);
}
.ss-form-row { display: flex; gap: 20px; flex-wrap: wrap; }
.ss-form-row .ss-form-group { flex: 1 1 220px; }

.ss-alert {
    padding: 14px 20px;
    border-radius: var(--radius);
    margin-bottom: 22px;
    font-size: 14px;
}
.ss-alert-success { background: #e8f7e9; color: #157a1a; border: 1px solid #bfe8c2; }
.ss-alert-error { background: #fdeceb; color: #b3261e; border: 1px solid #f5c6c2; }

/* ---------- Page heading used on booking/search/client pages ---------- */
.ss-page-head { text-align: center; margin-bottom: 40px; }
.ss-page-head h3 { font-size: 28px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.ss-page-head p { color: var(--muted); font-size: 15px; max-width: 560px; margin: 0 auto; }
@media (max-width: 767px) {
    .ss-page-head h3 { font-size: 22px; }
}

/* ---------- Booking / auth forms — centred card ---------- */
.ss-form-wrap { max-width: 640px; margin: 0 auto; }
.ss-form-wrap.ss-form-narrow { max-width: 460px; }
.ss-form-switch { text-align: center; margin-top: 18px; font-size: 14px; color: var(--muted); }
.ss-form-switch a { color: var(--brand); font-weight: 600; }

/* ---------- Responsive tables (dashboard, bookings) ---------- */
.ss-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ss-table { width: 100%; border-collapse: collapse; min-width: 480px; }
table.ss-table th, table.ss-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
table.ss-table th {
    background: var(--bg-soft);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .5px;
    color: var(--text);
}
table.ss-table tr:hover { background: #fafafa; }

/* ---------- Status badges ---------- */
.ss-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
}
.ss-badge-new, .ss-badge-unread, .ss-badge-processing { background: #fff4e0; color: #a15c00; }
.ss-badge-contacted, .ss-badge-read { background: #eef1f5; color: #555; }
.ss-badge-confirmed, .ss-badge-replied, .ss-badge-delivered, .ss-badge-approved { background: #e8f7e9; color: #157a1a; }
.ss-badge-completed, .ss-badge-archived { background: #eee; color: #555; }
.ss-badge-cancelled, .ss-badge-spam { background: #fdeceb; color: #b3261e; }

/* ---------- Grid helper (cards, media, galleries) ---------- */
.ss-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.ss-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ss-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) {
    .ss-grid, .ss-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .ss-grid, .ss-grid-2, .ss-grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Media tile (photos/videos in grids) ---------- */
.ss-media-tile { border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); display: block; }
.ss-media-tile img, .ss-media-tile video { width: 100%; height: 210px; object-fit: cover; display: block; }
.ss-media-tile-lg img { height: 340px; }
@media (max-width: 767px) {
    .ss-media-tile-lg img { height: 220px; }
}
.ss-media-tile .ss-media-caption { padding: 12px 14px; }
.ss-video-embed { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius); background: #000; }
.ss-video-embed iframe, .ss-video-embed video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* ---------- Testimonial card ---------- */
.ss-testimonial-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    text-align: center;
    height: 100%;
}
.ss-testimonial-card img {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 16px;
}
.ss-testimonial-card p { font-size: 14px; color: var(--text); font-style: italic; margin-bottom: 14px; }
.ss-testimonial-card h5 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.ss-star { color: #f5b301; }

/* ---------- Sidebar card (portfolio-details, blog-details) ---------- */
.ss-sidebar-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
}
.ss-sidebar-card h4 { font-size: 17px; margin-bottom: 14px; color: var(--ink); }
.ss-sidebar-card .ss-meta { font-size: 14px; margin-bottom: 8px; color: var(--text); }
.ss-sidebar-card .ss-meta strong { color: var(--ink); }
.ss-sidebar-card .ss-btn { margin-top: 14px; }

/* ---------- Blog comment list ---------- */
.ss-comment { border-bottom: 1px solid var(--border); padding: 16px 0; }
.ss-comment strong { color: var(--ink); }
.ss-comment .ss-comment-date { color: var(--muted); font-size: 13px; margin-left: 6px; }
.ss-comment p { margin-top: 6px; font-size: 14px; color: var(--text); }

/* ---------- Pagination ---------- */
.ss-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.ss-pagination a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--border); color: var(--ink); font-size: 14px;
}
.ss-pagination a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Click-to-call number fix ---------- */
/* The original template positions the phone number label with a fragile
   percentage-based offset and no nowrap, so on narrow/mobile screens it
   wraps onto two lines and overlaps nearby content. Force it to stay on
   one line, anchor it reliably to the left of the round call button, and
   hide the text label on very small screens (the button itself still
   works as a tap-to-call target — this just avoids visual overlap). */
.call-buton .cc-calto-action-ripple {
    overflow: visible;
}
span.num {
    position: absolute;
    left: auto;
    right: 100%;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 14px;
    white-space: nowrap;
    background: rgba(17, 17, 17, 0.78);
    color: #fff !important;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
@media (max-width: 575px) {
    span.num { display: none; }
}

/* ---------- Header "Login / My Account" button ---------- */
/* Lives as a normal nav <li> so it inherits the template's own
   responsive nav-menu / mobile slicknav behaviour automatically. */
.nav-menu > ul > li.ss-nav-login { margin-left: 6px; }
.nav-menu > ul > li.ss-nav-login > a {
    background: var(--brand);
    color: #fff !important;
    padding: 9px 20px !important;
    border-radius: 30px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.nav-menu > ul > li.ss-nav-login > a:after { display: none !important; }
.nav-menu > ul > li.ss-nav-login > a:hover { background: var(--brand-dark); color: #fff !important; }
.nav-menu > ul > li.ss-nav-login > a i { margin-right: 5px; }
/* Inside the mobile slicknav dropdown, drop the pill styling and just
   show it as a normal menu row like every other link. */
.slicknav_nav .ss-nav-login > a {
    background: transparent !important;
    color: inherit !important;
    padding: inherit !important;
    border-radius: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ---------- Animated background (snowflakes + flower petals, rainbow) ---------- */
/* Fixed full-viewport overlay that gently falls over the whole page on every
   scroll position; pointer-events disabled so it never blocks clicks/taps. */
#ss-particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
}

/* ---------- Utility ---------- */
.ss-text-center { text-align: center; }
.ss-text-muted { color: var(--muted); font-size: 13px; }
.ss-mt-sm { margin-top: 10px; }
.ss-mt-md { margin-top: 24px; }
.ss-mt-lg { margin-top: 44px; }
.ss-mb-md { margin-bottom: 24px; }
.ss-mb-0 { margin-bottom: 0 !important; }

/* ---------- Responsive nudges shared across new pages ---------- */
@media (max-width: 767px) {
    .ss-form-row { flex-direction: column; gap: 0; }
    .ss-form-row .ss-form-group { flex: 1 1 100%; }
    .ss-media-tile img, .ss-media-tile video { height: 160px; }
    table.ss-table th, table.ss-table td { padding: 10px 12px; font-size: 13px; }
}
@media (max-width: 479px) {
    .ss-card, .ss-sidebar-card { padding: 18px; }
    .ss-btn { padding: 11px 22px; font-size: 13px; }
}