/* ================================================================
   Akansha News Image Plugin — style.css v2.0
   Matches reference: yellow border, 3-col header, 2-col body, white footer
================================================================ */

/* ── Google Font import fallback ───────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Ramabhadra&family=Ramabhadra&display=swap');

/* ──────────────────────────────────────────────────────────────
   CARD — off-screen, width 1020px (captured by html2canvas)
────────────────────────────────────────────────────────────── */
#ani-card {
    position: fixed;
    left:   -9999px;
    top:    0;
    z-index: -1;

    width:      720px;
    background: #ffffff;
    box-sizing: border-box;
    border:     10px solid #c60206;   /* redcolor/red border all around */

    font-family: 'Ramabhadra', 'Noto Sans Telugu', Arial, sans-serif;
    color: #222;
    line-height: 1.6;
}

.ani-card-inner {
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

.ani-pad {
    padding-left: 28px;
    padding-right: 28px;
    box-sizing: border-box;
}

/* ──────────────────────────────────────────────────────────────
   HEADER  (3 columns: phone | logo | website)
────────────────────────────────────────────────────────────── */
.ani-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-top:     18px;
    padding-bottom:  14px;
}

/* Left — label + phone */
.ani-header-left {
    flex:        1;
    display:     flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.4;
}
.ani-hl-label {
    font-size:   13px;
    color:       #333;
    font-family: 'Ramabhadra', sans-serif;
    font-weight: normal;
    margin-bottom: 4px;
}
.ani-hl-phone {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   18px;
    font-weight: bold;
    color:       #111;
    font-family: Arial, sans-serif;
}

/* Center — logo / site name */
.ani-header-center {
    flex:       1;
    text-align: center;
    display:    flex;
    justify-content: center;
    align-items: center;
}
.ani-header-center a {
    display: inline-block;
}
.ani-header-center img {
    max-height: 90px;
    width:      auto;
    display:    inline-block;
    vertical-align: middle;
}
.ani-site-name {
    font-family: 'Ramabhadra', sans-serif;
    font-size:   32px;
    font-weight: 400;
    color:       #111;
    background:  #c60206;
    padding:     6px 20px;
    border-radius: 4px;
    display:     inline-block;
}

/* Right — website */
.ani-header-right {
    flex:        1;
    display:     flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: center;
}
.ani-header-right .ani-website {
    font-size:   15px;
    font-weight: bold;
    color:       #111;
    font-family: Arial, sans-serif;
    text-align:  right;
}

/* ──────────────────────────────────────────────────────────────
   DIVIDER LINE (red)
────────────────────────────────────────────────────────────── */
.ani-full-red-line {
    width:         100%;
    height:        5px;
    background:    #c60206;
    margin-bottom: 20px;
}

/* ──────────────────────────────────────────────────────────────
   FEATURED IMAGE
────────────────────────────────────────────────────────────── */
.ani-thumb {
    width:         100%;
    margin-bottom: 20px;
    line-height:   0;
}
.ani-thumb-img,
.ani-thumb img {
    width:      100% !important;
    height:     auto !important;
    max-height: none !important;
    display:    block !important;
    object-fit: contain !important;
    border-radius: 0;
}

/* ──────────────────────────────────────────────────────────────
   POST TITLE
────────────────────────────────────────────────────────────── */
.ani-title {
    font-family:  'Ramabhadra', 'Ramabhadra', sans-serif;
    font-size:    30px;
    font-weight:  400;
    line-height:  1.4;
    color:        #111;
    margin:       0 0 0 0;
    text-align:   left;
    padding-top:  8px;
    padding-bottom: 8px;
}
.ani-title h2 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
}

/* ──────────────────────────────────────────────────────────────
   META BAR (gray bar — date left, site name right)
────────────────────────────────────────────────────────────── */
.ani-meta {
    margin-bottom: 18px;
    background:    #c60206;
    padding-top:   10px;
    padding-bottom: 10px;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    padding-left:  28px;
    padding-right: 28px;
}
.ani-meta-date {
    font-family: Arial, sans-serif;
    font-size:   14px;
    color:       #ffffff;
}
.ani-meta-site {
    font-family: Arial, sans-serif;
    font-size:   14px;
    font-weight: bold;
    color:       #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hide old red-bar if still present */
.ani-red-bar { display: none; }

/* ──────────────────────────────────────────────────────────────
   BODY TEXT  (1-column layout)
────────────────────────────────────────────────────────────── */
.ani-body {
    font-family:   'Ramabhadra', sans-serif;
    font-size:     18px;
    font-weight:   400;
    line-height:   1.8;
    color:         #333;
    text-align:    left;
    column-count:  1;
    column-gap:    28px;
    margin-bottom: 24px;
    padding-top:   4px;
}
.ani-body p {
    margin: 0 0 12px 0;
}
.ani-body img {
    width:   100% !important;
    height:  auto !important;
    display: block;
    margin:  16px auto;
}

/* ──────────────────────────────────────────────────────────────
   FOOTER (white background — dots left, website right)
────────────────────────────────────────────────────────────── */
.ani-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      #ffffff;
    border-top:      2px solid #e0e0e0;
    padding:         14px 28px;
    font-family:     'Ramabhadra', Arial, sans-serif;
    font-size:       16px;
    color:           #333;
}
.ani-footer-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ani-footer-dot {
    width:         16px;
    height:        16px;
    border-radius: 50%;
    display:       inline-block;
}
.ani-footer-dot-teal  { background: #2bbfaa; }
.ani-footer-dot-pink  { background: #e84c88; }
.ani-footer-dot-black { background: #111111; }

.ani-footer-website {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-weight: bold;
    color:       #333;
    font-family: Arial, sans-serif;
    font-size:   15px;
}

/* ================================================================
   GENERATE BUTTON
================================================================ */
.ani-generate-btn {
    display:      inline-flex;
    align-items:  center;
    gap:          10px;
    padding:      14px 32px;
    background:   linear-gradient(135deg, #f5c518 0%, #e8a800 100%);
    color:        #111;
    border:       none;
    border-radius: 50px;
    font-size:    16px;
    font-weight:  800;
    font-family:  'Inter', Arial, sans-serif;
    cursor:       pointer;
    margin-bottom: 24px;
    box-shadow:   0 8px 24px rgba(245,197,24,0.4);
    transition:   all .25s ease;
}
.ani-generate-btn:hover {
    transform:  translateY(-3px);
    box-shadow: 0 12px 32px rgba(245,197,24,0.55);
}
.ani-generate-btn:active  {
    transform: translateY(0);
    box-shadow: 0 4px 16px rgba(245,197,24,0.3);
}
.ani-generate-btn:disabled {
    opacity:   0.58;
    cursor:    not-allowed;
    transform: none;
    box-shadow: none;
}


/* ================================================================
   LOADING SPINNER (full-screen overlay)
================================================================ */
#ani-spinner {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         1000000;
    background:      rgba(10,10,10,.65);
    justify-content: center;
    align-items:     center;
    flex-direction:  column;
    gap:             16px;
}
#ani-spinner.ani-visible { display: flex; }

.ani-spinner-ring {
    width:        54px;
    height:       54px;
    border:       6px solid rgba(255,255,255,.15);
    border-top-color: #f5c518;
    border-radius: 50%;
    animation:    ani-spin .75s linear infinite;
}
.ani-spinner-text {
    color:       #fff;
    font-family: Arial, sans-serif;
    font-size:   15px;
    font-weight: bold;
    margin:      0;
}
@keyframes ani-spin { to { transform: rotate(360deg); } }


/* ================================================================
   MODAL
================================================================ */
#ani-modal {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         999999;
    background:      rgba(8,8,8,.72);
    justify-content: center;
    align-items:     center;
}
#ani-modal.ani-visible { display: flex; }

.ani-modal-box {
    display:        flex;
    flex-direction: column;
    width:          95vw;
    max-width:      1120px;
    height:         92vh;
    background:     #eef0f4;
    border-radius:  12px;
    overflow:       hidden;
    box-shadow:     0 24px 64px rgba(0,0,0,.55);
}

/* Top bar */
.ani-modal-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      #14142b;
    color:           #fff;
    padding:         14px 22px;
    flex-shrink:     0;
}
.ani-modal-title {
    font-family: Arial, sans-serif;
    font-size:   16px;
    font-weight: bold;
    letter-spacing: .4px;
}
.ani-close-btn {
    background:  transparent;
    border:      none;
    color:       #bbb;
    font-size:   32px;
    line-height: 1;
    cursor:      pointer;
    padding:     0;
    transition:  color .2s, transform .15s;
}
.ani-close-btn:hover { color: #f5c518; transform: scale(1.15); }

/* Canvas scroll area */
.ani-preview-area {
    flex:            1;
    overflow-y:      auto;
    display:         flex;
    justify-content: center;
    align-items:     flex-start;
    padding:         28px 22px;
    background:      #e2e5e9;
}
#ani-canvas,
.ani-preview-area canvas {
    max-width:    100%;
    width:        auto;
    height:       auto;
    display:      block;
    box-shadow:   0 8px 40px rgba(0,0,0,.22);
    border-radius: 3px;
    margin:       0 auto;
}

/* Action bar */
.ani-action-bar {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             10px;
    background:      #14142b;
    padding:         15px 22px;
    flex-shrink:     0;
    flex-wrap:       wrap;
}

.ani-action-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       10px 22px;
    border:        none;
    border-radius: 26px;
    font-size:     13px;
    font-weight:   bold;
    font-family:   Arial, sans-serif;
    color:         #fff;
    cursor:        pointer;
    text-decoration: none;
    white-space:   nowrap;
    box-sizing:    border-box;
    transition:    opacity .18s, transform .15s;
    appearance:    none;
    -webkit-appearance: none;
}
.ani-action-btn:hover  { opacity: .85; transform: translateY(-1px); color: #fff; }
.ani-action-btn:active { transform: translateY(0); }
.ani-action-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.ani-btn-gray   { background: #546e7a; }
.ani-btn-blue   { background: #0097c4; }
.ani-btn-green  { background: #00a878; }
.ani-btn-orange { background: #e67400; }

select.ani-action-btn {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%23fff' d='M5 7L0 0h10z'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 14px center;
    background-color:    #546e7a;
    padding-right:       36px;
}
select.ani-action-btn option { color: #111; background: #fff; }

/* Toast */
#ani-toast {
    position:   fixed;
    bottom:     100px;
    left:       50%;
    transform:  translateX(-50%);
    background: rgba(10,10,10,.9);
    color:      #fff;
    padding:    11px 26px;
    border-radius: 30px;
    font-size:  14px;
    font-family: Arial, sans-serif;
    z-index:    9999999;
    opacity:    0;
    transition: opacity .3s ease;
    white-space: nowrap;
    pointer-events: none;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
    .ani-modal-box   { width: 100vw; height: 100dvh; border-radius: 0; }
    .ani-action-bar  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; }
    .ani-action-btn  { justify-content: center; width: 100%; padding: 10px 6px; font-size: 12px; }
    .ani-preview-area{ padding: 14px; }
}