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

/* STREAMING_CHUNK: Basic Card Layout and Styling /
/ ── Google Font import fallback ───────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Ramabhadra&family=Noto+Sans+Telugu:wght@400;700;900&display=swap');

/* ──────────────────────────────────────────────────────────────
CARD — off-screen, width 720px (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 #CE8E00;   /* red border all around */

font-family: 'Noto Sans Telugu', 'Ramabhadra', 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;
}

/* STREAMING_CHUNK: Header styling with logo, title, and website /
/ ──────────────────────────────────────────────────────────────
HEADER  (3 columns: Logo | Title | Website)
────────────────────────────────────────────────────────────── */
.ani-header {
display:         flex;
align-items:     center;
justify-content: space-between;
padding-top:     20px;
padding-bottom:  20px;
}

/* Left — Logo */
.ani-header-left {
flex:        1;
display:     flex;
justify-content: flex-start;
align-items: center;
}
.ani-header-logo {
max-width: 100px;
max-height: 80px;
object-fit: contain;
border-radius: 8px;
}

/* Center — Highlighted Site Name */
.ani-header-center {
flex:       1;
display:    flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.ani-site-name {
font-family: 'Noto Sans Telugu', sans-serif;
font-size:   36px;
font-weight: 900;
color:       #ffffff;
background:  #ff1a1a;
padding:     10px 30px;
border-radius: 8px;
display:     inline-block;
white-space: nowrap;
box-shadow:  0 4px 6px rgba(0, 0, 0, 0.1);
border:      1px solid #ff4d4d;
letter-spacing: 1px;
}

/* 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:   16px;
font-weight: bold;
color:       #111;
font-family: 'Inter', Arial, sans-serif;
text-align:  right;
letter-spacing: 0.5px;
}

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

/* STREAMING_CHUNK: Image, Title, and Post Meta styling /
/ ──────────────────────────────────────────────────────────────
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:  'Noto Sans Telugu', 'Ramabhadra', sans-serif;
font-size:    30px;
font-weight:  700;
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 (red bar — date left, site name right)
────────────────────────────────────────────────────────────── */
.ani-meta {
margin-bottom: 18px;
background:    #CE8E00;
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;
font-weight: bold;
}
.ani-meta-site {
font-family: Arial, sans-serif;
font-size:   14px;
font-weight: bold;
color:       #ffffff;
text-transform: uppercase;
letter-spacing: 0.5px;
}

/* STREAMING_CHUNK: Body content and footer /
/ ──────────────────────────────────────────────────────────────
BODY TEXT  (1-column layout)
────────────────────────────────────────────────────────────── */
.ani-body {
font-family:   'Noto Sans Telugu', '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:     'Noto Sans Telugu', '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;
}

/* STREAMING_CHUNK: Buttons and Modals UI /
/ ================================================================
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; }
}