/* =====================================================================
   Chennai Bulk SMS  -  Green & White theme
   Loaded LAST on every page (see includes/header.php), so it overrides
   style.css / responsive.css without editing them.
   Change the colours in :root and the whole site follows.
   ===================================================================== */
:root {
    --purple-900: #0a5228;
    --purple-800: #0f7339;
    --purple-700: #1d8f4d;   /* main brand green */
    --purple-600: #2bad61;
    --purple-500: #4bd082;
    --purple-200: #c9f3db;
    --purple-100: #e8faf0;
    --purple-50:  #f5fdf8;
    --white:      #ffffff;
    --ink:        #1a3324;
    --red:        #e91e8c;   /* enquiry button (pink) */
    --red-dark:   #c2127a;
    --wa:         #25d366;   /* whatsapp green */
    --wa-dark:    #1aa84f;
    --shadow-sm:  0 4px 14px rgba(10,82,40, .12);
    --shadow-md:  0 10px 30px rgba(10,82,40, .22);
}

/* ---------- base ---------- */
.btn-enquiry-header, .btn-hero, .enquiry-tab, .mobile-action-bar, .enq-modal, .enq-modal input, .enq-modal textarea, .enq-modal button {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}
body { color: var(--ink); background: var(--white); }
a { color: var(--purple-700); }
a:hover, a:focus { color: var(--purple-500); }
::selection { background: var(--purple-700); color: #fff; }

/* ---------- header / navigation ---------- */
.sm_navi_main_wrapper { background: var(--white); box-shadow: 0 2px 14px rgba(10,82,40, .08); }
.mainmenu ul li a { color: var(--ink); }
.mainmenu ul li:hover > .gc_main_navigation,
.mainmenu ul li.active > .gc_main_navigation { color: var(--purple-700); }
.navi_2_dropdown { border-top: 3px solid var(--purple-700); }

.header_btn li:first-child a { color: var(--purple-700); border-color: var(--purple-700); }
.header_btn li:first-child a:hover { color: #fff; }
.header_btn li:last-child a { background: var(--purple-700); border-color: var(--purple-700); color: #fff; }

/* pink "Enquiry" button in the header (desktop) */
.btn-enquiry-header {
    float: right; margin: 5px 0 0 14px; order: 3;
    display: inline-flex; align-items: center; gap: 8px;
    height: 45px; padding: 0 22px; border-radius: 5px;
    background: var(--red); color: #fff !important; font-weight: 600; font-size: 15px;
    text-decoration: none; border: 0; cursor: pointer;
    box-shadow: 0 6px 16px rgba(233, 30, 140, .35);
    transition: background .2s, transform .2s, box-shadow .2s;
}
.btn-enquiry-header:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(233, 30, 140, .45); }
.sm_top_header_right_wrapper { display: flex; flex-direction: row-reverse; flex-wrap: nowrap; align-items: flex-start; }
.sm_top_header_right_wrapper .header_btn { float: none; }
/* desktop header: logo | menu (fills the middle) | buttons  -> fits all three buttons at any width */
@media (min-width: 1200px) {
    .sm_navi_main_wrapper > .container-fluid { display: flex; align-items: flex-start; justify-content: space-between; }
    .sm_logo_wrapper { float: none; width: auto; flex: 0 0 auto; order: 1; }
    .sm_navigation_wrapper { float: none; width: auto; flex: 1 1 auto; padding: 0 8px; order: 2; }
    .sm_top_header_right_wrapper { float: none; width: auto; flex: 0 0 auto; order: 3; }
}
@media (min-width: 1200px) and (max-width: 1479.98px) {   /* laptops: slightly tighter so everything stays on one line */
    .mainmenu ul li a { padding: 17px 11px; font-size: 15px; }
    .header_btn li:first-child a, .header_btn li:last-child a { width: 92px; }
    .header_btn li:first-child a { margin-right: 10px; }
    .btn-enquiry-header { padding: 0 16px; margin-left: 10px; }
    .sm_navigation_wrapper { padding: 0; }
}
@media (min-width: 992px) and (max-width: 1299.98px) {
    .btn-enquiry-header { display: none !important; }   /* tight widths: the red side tab is still there */
}

/* mobile slide-in menu */
.cd-dropdown { background: var(--purple-800); }
.cd-dropdown h2 { background: #fff; }
.cd-dropdown-content a, .cd-dropdown-content .cd-secondary-dropdown a { background: var(--purple-800); color: #fff !important; font-family: 'Poppins', Arial, sans-serif; }
.cd-dropdown-content .go-back a { color: var(--purple-200) !important; }
.cd-dropdown-content .cd-enquiry-item a { background: var(--red); color: #fff !important; font-weight: 600; text-align: center; }
.sm_mobail_menu { float: right; margin-top: 8px; }

/* ---------- hero / sections ---------- */
.slider-area .slider_btn { max-width: none; }
.slider-area .slider_btn button, .slider-area .slider_btn a.btn-hero { margin: 8px 12px 8px 0; }

/* hero call / whatsapp buttons (replace the old inline-styled <button><a> pairs) */
.btn-hero {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px; border-radius: 6px; font-weight: 600; font-size: 15px;
    color: #fff !important; text-decoration: none !important; line-height: 1;
    transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; }
.btn-hero-call { background: #fff; color: var(--purple-700) !important; }
.btn-hero-call:hover { background: var(--purple-100); color: var(--purple-700) !important; }
.btn-hero-wa   { background: var(--wa); }
.btn-hero-wa:hover { background: var(--wa-dark); }

/* section accents -> purple */
.sms_heading_wrapper h4, .sms_heading_wrapper h2 { color: var(--purple-700); }
.footer_wrapper { background: linear-gradient(135deg, var(--purple-800) 10%, var(--purple-900) 100%); }
.footer_bottom_wrapper { background: var(--purple-900); }
.footer_about_link_wrapper li a:hover { color: var(--purple-200); }
.connect_icons li a:hover { color: var(--purple-200); }

/* generic buttons used across the template */
.btn-primary, .btn.btn-primary {
    background: var(--purple-700); border-color: var(--purple-700); color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--purple-600) !important; border-color: var(--purple-600) !important; color: #fff;
}
#return-to-top { color: var(--purple-700); border: 1px solid var(--purple-100); }

/* ---------- floating Call + WhatsApp buttons (desktop / tablet) ---------- */
.float-btn {
    position: fixed; bottom: 24px; width: 58px; height: 58px; z-index: 1040;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #fff !important; font-size: 28px; text-decoration: none !important;
    box-shadow: var(--shadow-md); transition: transform .2s, box-shadow .2s;
}
.float-btn:hover { transform: scale(1.08); color: #fff; }
.float-call { left: 24px;  background: #fff; color: var(--purple-700) !important; border: 2px solid var(--purple-700); }
.float-call:hover { color: var(--purple-700); }
.float-wa   { right: 24px; background: var(--wa); font-size: 32px; }
.float-btn::after {          /* soft pulse ring */
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid currentColor; opacity: 0; animation: floatPulse 2.4s infinite;
}
.float-call::after { border-color: var(--purple-500); }
.float-wa::after   { border-color: var(--wa); }
@keyframes floatPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* keep back-to-top clear of the WhatsApp button */
#return-to-top { bottom: 96px; right: 26px; }

/* pink vertical "Enquiry Now" tab, flush with the right edge (desktop / tablet) */
.enquiry-tab {
    position: fixed; right: 0; top: 50%; z-index: 1040; transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl; padding: 20px 11px; border: 0; border-radius: 0 10px 10px 0;
    background: var(--red); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 1px;
    box-shadow: 4px 0 16px rgba(233, 30, 140, .4); cursor: pointer; transition: background .2s, padding .2s;
}
.enquiry-tab:hover { background: var(--red-dark); padding-right: 16px; }

/* ---------- mobile bottom action bar ---------- */
.mobile-action-bar { display: none; }

@media (max-width: 767.98px) {
    .float-btn, .enquiry-tab, .btn-enquiry-header { display: none !important; }

    body { padding-bottom: 58px; }
    .mobile-action-bar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
        height: 58px; padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -4px 18px rgba(10,82,40, .25);
    }
    .mobile-action-bar > * {
        flex: 1 1 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
        border: 0; margin: 0; padding: 0; color: #fff !important; font-size: 15px; font-weight: 600;
        text-decoration: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .mobile-action-bar i { font-size: 20px; }
    .mab-call    { background: var(--purple-700); }
    .mab-enquiry { background: var(--red); }
    .mab-wa      { background: var(--wa); }
    #return-to-top { bottom: 72px; right: 14px; }
    .footer_bottom_wrapper { margin-bottom: 0; }
}
@media (max-width: 380px) {
    .mobile-action-bar > * { font-size: 13px; gap: 5px; }
    .mobile-action-bar i { font-size: 17px; }
}

/* ---------- enquiry popup ---------- */
.enq-overlay {
    position: fixed; inset: 0; z-index: 2000; display: none;
    align-items: center; justify-content: center; padding: 16px;
    background: rgba(6,52,25, .72); backdrop-filter: blur(3px);
    overflow-y: auto;
}
.enq-overlay.is-open { display: flex; animation: enqFade .2s ease; }
body.enq-open { overflow: hidden; }
.enq-modal {
    position: relative; width: 100%; max-width: 460px; margin: auto;
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4); animation: enqRise .25s ease;
}
.enq-head { background: linear-gradient(135deg, var(--purple-700), var(--purple-900)); color: #fff; padding: 22px 56px 20px 26px; }
.enq-head h3 { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: #fff; }
.enq-head p  { margin: 0; font-size: 14px; color: var(--purple-200); }
.enq-close {
    position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; line-height: 30px;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff;
    font-size: 24px; cursor: pointer; transition: background .2s;
}
.enq-close:hover { background: var(--red); }
#enqForm { padding: 22px 26px 24px; max-height: calc(100vh - 150px); overflow-y: auto; }
.enq-field { margin-bottom: 14px; }
.enq-field label { display: block; margin: 0 0 5px; font-size: 13px; font-weight: 600; color: var(--purple-800); }
.enq-field input, .enq-field textarea {
    width: 100%; padding: 11px 13px; font-size: 15px; color: var(--ink);
    border: 1.5px solid var(--purple-200); border-radius: 8px; background: var(--purple-50);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.enq-field textarea { resize: none; }
.enq-field input:focus, .enq-field textarea:focus {
    outline: 0; background: #fff; border-color: var(--purple-600); box-shadow: 0 0 0 3px rgba(43,173,97, .15);
}
.enq-inline { display: flex; gap: 8px; }
.enq-inline input { flex: 1 1 auto; min-width: 0; }
.enq-btn-purple {
    flex: 0 0 auto; padding: 0 16px; border: 0; border-radius: 8px;
    background: var(--purple-700); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
    transition: background .2s;
}
.enq-btn-purple:hover:not(:disabled) { background: var(--purple-600); }
.enq-btn-purple:disabled { opacity: .6; cursor: not-allowed; }
.enq-msg { min-height: 0; margin-top: 5px; font-size: 12.5px; }
.enq-msg.ok  { color: #137a3a; }
.enq-msg.err { color: #b5121f; }
.enq-submit {
    width: 100%; padding: 13px; border: 0; border-radius: 8px; margin-top: 4px;
    background: var(--red); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 16px rgba(233, 30, 140, .3); transition: background .2s;
}
.enq-submit:hover:not(:disabled) { background: var(--red-dark); }
.enq-submit:disabled { background: #bddbca; box-shadow: none; cursor: not-allowed; }
.enq-note { margin: 12px 0 0; text-align: center; font-size: 12px; color: #7d7390; }
@keyframes enqFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes enqRise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
    .enq-overlay { padding: 10px; align-items: flex-end; }
    .enq-modal { border-radius: 16px 16px 0 0; margin-bottom: 0; }
    .enq-inline { flex-direction: column; }
    .enq-btn-purple { padding: 11px 16px; }
    #enqForm { max-height: calc(100vh - 130px); }
}
@media (prefers-reduced-motion: reduce) {
    .float-btn::after, .enq-overlay.is-open, .enq-modal { animation: none; }
}

.main_nav_ul { white-space: nowrap; }

@media (max-width: 767.98px) { #return-to-top { bottom: 72px; right: 10px; opacity: .92; } .btm_foter_box p { padding-right: 56px; } }


/* ==========================================================
   Professional price table (all pricing pages)
   ========================================================== */
.pricing_overflow_wrap { overflow-x: visible; }
table.pro-price {
    width: 100%; max-width: 900px; margin: 10px auto 0;
    border: 0; border-collapse: separate; border-spacing: 0;
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(10, 82, 40, .12), 0 2px 6px rgba(0, 0, 0, .05);
}
table.pro-price thead th {
    background: linear-gradient(135deg, var(--purple-800), var(--purple-700));
    color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .4px;
    text-transform: uppercase; text-align: center; padding: 16px 12px; border: 0;
}
table.pro-price tbody td {
    text-align: center; vertical-align: middle; padding: 18px 12px;
    border: 0; border-bottom: 1px solid var(--purple-100); background: #fff;
    color: #263238; font-size: 16px;
}
table.pro-price tbody tr:nth-child(even) td { background: var(--purple-50); }
table.pro-price tbody tr:last-child td { border-bottom: 0; }
table.pro-price tbody tr { transition: background .2s, transform .2s; }
table.pro-price tbody tr:hover td { background: var(--purple-100); }
.pp-qty { font-size: 19px; font-weight: 700; color: var(--purple-900); }
.pp-amt { font-size: 21px; font-weight: 700; color: var(--purple-700); }
.pp-gst { display: block; margin-top: 2px; font-size: 12px; color: #78909c; font-weight: 500; }
.pp-val { display: inline-block; padding: 4px 14px; border-radius: 20px; background: var(--purple-100); color: var(--purple-800); font-size: 14px; font-weight: 600; }
a.pp-buy {
    display: inline-block; min-width: 120px; padding: 10px 26px; border-radius: 30px;
    background: var(--purple-700); color: #fff !important; font-size: 15px; font-weight: 600;
    text-decoration: none; border: 2px solid var(--purple-700);
    box-shadow: 0 4px 10px rgba(29, 143, 77, .3); transition: all .2s ease;
}
a.pp-buy:hover, a.pp-buy:focus { background: #fff; color: var(--purple-700) !important; transform: translateY(-1px); }

@media (max-width: 640px) {
    table.pro-price, table.pro-price tbody, table.pro-price tr, table.pro-price td { display: block; width: 100%; }
    table.pro-price thead { display: none; }
    table.pro-price { background: transparent; box-shadow: none; border-radius: 0; }
    table.pro-price tbody tr {
        margin-bottom: 16px; background: #fff; border-radius: 12px; overflow: hidden;
        box-shadow: 0 4px 14px rgba(10, 82, 40, .15); border-top: 4px solid var(--purple-700);
    }
    table.pro-price tbody td, table.pro-price tbody tr:nth-child(even) td {
        display: flex; justify-content: space-between; align-items: center; text-align: right;
        padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--purple-100);
    }
    table.pro-price tbody td::before {
        content: attr(data-label); font-size: 12px; font-weight: 600; text-transform: uppercase;
        color: #78909c; letter-spacing: .4px; text-align: left; margin-right: 12px;
    }
    table.pro-price tbody td:last-child { border-bottom: 0; }
    a.pp-buy { width: 100%; text-align: center; }
    table.pro-price tbody td:last-child::before { display: none; }
}