/* custom.css
 *
 * This stylesheet provides site‑specific overrides for the iLab
 * interface.  In particular it removes the pill‑shaped backgrounds
 * behind the top navigation items and replaces them with a clean,
 * transparent appearance.  It also adds an underline on hover to
 * provide subtle feedback without altering the layout.  Additional
 * styles can be added here to customise new UI elements such as
 * the email/license widget.
 */

/* Remove background and border from nav chips.  We retain the
   padding and font sizing defined in styles.css for consistent
   spacing. */
.nav .chip {
    background: transparent;
    border: none;
    padding: 6px 10px;
    position: relative;
    color: inherit;
    text-decoration: none;
}

/* Add a pseudo‑element underline that animates on hover. */
.nav .chip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: transparent;
    transition: background 0.3s;
}

.nav .chip:hover::after {
    background: var(--brand);
}

/* Style for the email & license widget container.  We reuse the
   existing .card class defined in styles.css for consistent padding
   and border styling.  Additional spacing below the widget helps
   separate it from the rest of the controls. */
/*
 * Email & License widget positioning
 *
 * The widget is now presented as a horizontal bar immediately below the
 * application bar.  It uses a flexbox layout so the email, OTP and
 * license inputs sit next to each other, with the Continue button
 * aligned to the baseline.  When space is constrained (small
 * screens) the fields will wrap onto the next line.  The final
 * message line spans the full width.  The styling matches the
 * surrounding panels for a cohesive look.
 */
#email-license-widget {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    margin: 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 12px;
}

/* Remove default margins on nested fields for compactness */
#email-license-widget .field {
    margin: 0;
    display: flex;
    flex-direction: column;
}

#email-license-widget label {
    font-size: 14px;
    margin-bottom: 4px;
}

#email-license-widget input {
    height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink);
}

#email-license-widget button {
    height: 36px;
    padding: 6px 16px;
    border-radius: 8px;
}

/* The message/hint spans the full width and sits on its own line */
#email-license-widget .hint,
#email-license-widget #al_message {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
}

/* Icon button used for file remove and lock/unlock controls */
.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 16px;
    line-height: 1;
    color: inherit;
}
.icon-btn:hover {
    color: var(--brand);
}
/*
 * Generic text centering helper.
 *
 * The upstream HTML includes elements (such as the footer on the
 * home page) which specify the class `text-center` to request
 * centered content.  However, no matching CSS rule existed so
 * browsers defaulted to left alignment.  Define a simple rule here
 * so any element with the `text-center` class will horizontally
 * centre its inline content.  The justify-content property helps when
 * flexbox layouts are applied, but has no adverse effect on static
 * elements.  See issue #2 on the task list.
 */
.text-center {
    text-align: center;
    justify-content: center;
}
.remote-row{display:grid;grid-template-columns:max-content 1fr max-content max-content;gap:10px;align-items:center;margin:8px 0 6px}
.remote-row .input{height:38px}

/* Remote image row:
   Show the optional remote image upload row so users can paste an external
   image URL directly.  Previously this row was hidden to simplify the UI,
   but the live site now requires a direct paste link option.  */

/*
 * Enhance the appearance of the “Buy Now” button in the purchase
 * section.  The default `.btn.primary` style in styles.css uses a
 * gradient but maintains a relatively small border radius and
 * padding.  To better match the provided design reference, we
 * override these properties specifically within the purchase actions
 * container.  Other buttons elsewhere on the site are unaffected.
 */
.purchase-actions .btn.primary {
    background: linear-gradient(90deg, #8b5cf6, #06b6d4);
    color: #fff;
    border: 0;
    border-radius: 24px;
    padding: 0 24px;
    height: 48px;
    font-size: 16px;
}