/* ============================================================
   Jamisan Floating Bars — Frontend CSS
   Styled to match Temique landing page design system

   HOW TO CUSTOMISE COLOURS
   ─────────────────────────────────────────────────────────────
   All colours are CSS custom properties. Override any of them
   in WordPress > Appearance > Customize > Additional CSS:

   :root {
     --jfb-header-bg:        #1a5c3a;   /* header bar background */
     --jfb-header-text:      #ffffff;   /* header bar text */
     --jfb-header-accent:    #7fe0a8;   /* header <span> highlight colour */

     --jfb-footer-bg:        #ffffff;   /* footer bar background */
     --jfb-footer-border:    #e0e0e0;   /* footer top border */
     --jfb-footer-text:      #1a1a1a;   /* footer price text */
     --jfb-footer-from:      #888888;   /* "From" label colour */

     --jfb-btn-bg:           #c0392b;   /* CTA button background */
     --jfb-btn-text:         #ffffff;   /* CTA button text */
     --jfb-btn-shadow:       rgba(192,57,43,0.28); /* CTA button shadow */
     --jfb-btn-shadow-hover: rgba(192,57,43,0.40); /* CTA button shadow on hover */
   }

   You can also scope overrides to a single page by adding a
   custom CSS class in the plugin metabox, then targeting it:

   .my-custom-class { --jfb-btn-bg: #1a5c3a; --jfb-btn-text: #ffffff; }
   ============================================================ */

:root {
    --jamisan-fb-z:       9999;
    --jamisan-font:       'DM Sans', system-ui, -apple-system, sans-serif;
    --jamisan-radius:     8px;

    /* Header */
    --jfb-header-bg:      #1a5c3a;
    --jfb-header-text:    #ffffff;
    --jfb-header-accent:  #7fe0a8;

    /* Footer bar */
    --jfb-footer-bg:      #ffffff;
    --jfb-footer-border:  #e0e0e0;
    --jfb-footer-text:    #1a1a1a;
    --jfb-footer-from:    #888888;

    /* CTA button inside footer */
    --jfb-btn-bg:           #c0392b;
    --jfb-btn-text:         #ffffff;
    --jfb-btn-shadow:       rgba(192, 57, 43, 0.28);
    --jfb-btn-shadow-hover: rgba(192, 57, 43, 0.40);
}

/* ── SHARED BASE ─────────────────────────────────────────── */
.jamisan-fb-header,
.jamisan-fb-footer {
    position: fixed;
    left: 0;
    right: 0;
    z-index: var(--jamisan-fb-z);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-family: var(--jamisan-font);
}

/* ── HEADER BAR ──────────────────────────────────────────── */
/*
   Styled as an announcement strip — slim, centred text, bold accent.
   Set background to your green (#1a5c3a) and text to white in plugin settings.
*/
.jamisan-fb-header {
    top: 0;
    transform: translateY(-100%);
    padding: 10px 48px 10px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-height: 42px;
    background-color: var(--jfb-header-bg) !important;
    color: var(--jfb-header-text) !important;
}

.jamisan-fb-header .jamisan-fb-message-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 640px;
}

.jamisan-fb-header-link {
    color: var(--jfb-header-text) !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1.4;
    text-align: center;
}

/* Highlight span inside header content — wrap key phrase in <span> in plugin */
.jamisan-fb-header-link span,
.jamisan-fb-header span {
    color: var(--jfb-header-accent);
    font-weight: 700;
}

/* ── FOOTER BAR ──────────────────────────────────────────── */
/*
   Styled as a two-column action bar — price on left, CTA button on right.
   Set background to white (#ffffff) and text to dark (#1a1a1a) in plugin settings.

   HOW TO STRUCTURE YOUR FOOTER CONTENT in the plugin:
   ──────────────────────────────────────────────────
   Enter this HTML in the footer content field:

   <div class="jfb-footer-inner">
     <div class="jfb-price-col">
       <span class="jfb-from">From</span>
       <span class="jfb-amount">₦19,500</span>
     </div>
     <span class="jfb-cta-btn">CHOOSE YOUR PACKAGE</span>
   </div>

   Set the footer URL to your packages anchor or order form link.
*/
.jamisan-fb-footer {
    bottom: 0;
    transform: translateY(100%);
    padding: 12px 20px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    border-top: 1px solid var(--jfb-footer-border);
    background-color: var(--jfb-footer-bg) !important;
    color: var(--jfb-footer-text) !important;
}

.jamisan-fb-footer .jamisan-fb-message-container {
    width: 100%;
    max-width: 560px;
}

.jamisan-fb-footer-link {
    color: var(--jfb-footer-text) !important;
    text-decoration: none;
    display: block;
    width: 100%;
}

/* Two-column layout inside footer */
.jfb-footer-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* Price column */
.jfb-price-col {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    line-height: 1.1;
    min-width: 0;
}

.jfb-from {
    font-size: 11px;
    color: var(--jfb-footer-from);
    font-weight: 400;
}

.jfb-amount {
    font-size: 20px;
    font-weight: 800;
    color: var(--jfb-footer-text);
}

/* CTA button inside footer */
.jfb-cta-btn {
    flex: 1;
    display: block;
    background: var(--jfb-btn-bg);
    color: var(--jfb-btn-text) !important;
    font-family: var(--jamisan-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: center;
    padding: 13px 16px;
    border-radius: var(--jamisan-radius);
    box-shadow: 0 3px 10px var(--jfb-btn-shadow);
    transition: transform 0.15s, box-shadow 0.15s;
    line-height: 1.2;
}

.jamisan-fb-footer-link:hover .jfb-cta-btn,
.jamisan-fb-footer-link:active .jfb-cta-btn {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px var(--jfb-btn-shadow-hover);
}

/* Fallback: if no .jfb-footer-inner markup — plain centred link */
.jamisan-fb-footer-link:not(:has(.jfb-footer-inner)) {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    padding: 4px 0;
}

/* ── VISIBLE STATE ───────────────────────────────────────── */
.jamisan-fb-header.visible,
.jamisan-fb-footer.visible {
    transform: translateY(0);
}

/* ── CLOSE BUTTON ────────────────────────────────────────── */
.jamisan-fb-close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: var(--jfb-header-text);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 7px;
    line-height: 1;
    border-radius: 50%;
    transition: background 0.15s;
}

.jamisan-fb-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ── ADMIN BAR OFFSET ────────────────────────────────────── */
body.admin-bar .jamisan-fb-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .jamisan-fb-header { top: 46px; } }

/* ── MESSAGE ROTATION ────────────────────────────────────── */
.jamisan-fb-message { display: none; }
.jamisan-fb-message:first-child { display: block; }

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    .jamisan-fb-header {
        padding: 8px 44px 8px 16px;
    }

    .jamisan-fb-header-link {
        font-size: 12px;
    }

    .jamisan-fb-footer {
        padding: 10px 16px;
    }

    .jfb-amount {
        font-size: 18px;
    }

    .jfb-cta-btn {
        font-size: 13px;
        padding: 12px 12px;
    }
}