/*
 * ShortU — Front-end base styles
 * Applies to all public-facing pages via base-front.html
 */

/* ── CSS Custom Properties ─────────────────────────────────────────────── */
:root {
    --su-color-primary:       #140c40;
    --su-color-primary-mid:   #2a1880;
    --su-color-accent:        #fa8f77;
    --su-color-accent-hover:  #f87060;
    --su-color-accent-orange: #f99100;
    --su-color-white:         #ffffff;
    --su-color-bg:            #f7f7fd;
    --su-color-border:        #dde1ea;
    --su-color-border-soft:   #e0dff5;
    --su-color-text:          #140c40;
    --su-color-text-muted:    #646d77;
    --su-color-muted-light:   #aaaaaa;
    --su-color-success:       #09cc7f;
    --su-color-success-dark:  #07a868;
    --su-color-danger:        #dc3545;
    --su-color-shadow:        rgba(20, 12, 64, 0.14);
    --su-color-shadow-soft:   rgba(20, 12, 64, 0.07);

    /* Social share brand colours */
    --su-color-twitter:  #1da1f2;
    --su-color-facebook: #1877f2;
    --su-color-linkedin: #0a66c2;
    --su-color-whatsapp: #25d366;
    --su-color-telegram: #0088cc;

    /* Spacing & shape */
    --su-radius:       10px;
    --su-radius-sm:    5px;
    --su-radius-lg:    14px;
    --su-transition:   0.18s ease;
}

/* ── Language dropdown button ──────────────────────────────────────────── */
.dropdown-lang-btn {
    background:   none;
    border:       none;
    color:        inherit;
    cursor:       pointer;
    display:      block;
    font-size:    inherit;
    padding:      0;
    text-align:   left;
    width:        100%;
}

.dropdown-lang-btn:hover {
    color: var(--su-color-accent-orange);
}

/* ── Compact global spacing overrides ─────────────────────────────────── */
.pt-130 { padding-top:    70px !important; }
.pb-130 { padding-bottom: 70px !important; }
.pt-100 { padding-top:    60px !important; }
.pb-100 { padding-bottom: 60px !important; }
.mb-90  { margin-bottom:  45px !important; }
.mt-90  { margin-top:     45px !important; }
.mb-50  { margin-bottom:  28px !important; }
.mt-50  { margin-top:     28px !important; }

.section-padding30 {
    padding-top:    40px !important;
    padding-bottom: 40px !important;
}

.section-padding40 {
    padding-top:    50px !important;
    padding-bottom: 50px !important;
}

/* ── Action buttons row ────────────────────────────────────────────────── */
.su-actions {
    align-items:  center;
    display:      inline-flex;
    flex-wrap:    wrap;
    gap:          4px;
}

/* ── Dropdown wrapper ──────────────────────────────────────────────────── */
.su-dropdown-wrap {
    display:  inline-block;
    position: relative;
}

/* ── Dropdown panel ────────────────────────────────────────────────────── */
.su-panel {
    background:    var(--su-color-white);
    border:        1px solid var(--su-color-border);
    border-radius: var(--su-radius);
    box-shadow:    0 6px 24px var(--su-color-shadow);
    display:       none;
    min-width:     230px;
    position:      absolute;
    right:         0;
    top:           calc(100% + 6px);
    z-index:       10000;
}

.su-panel.su-panel--open {
    display: block;
}

.su-panel-body {
    padding: 14px;
}

/* ── QR download grid ──────────────────────────────────────────────────── */
.su-panel-label {
    color:          var(--su-color-muted-light);
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.05em;
    margin-bottom:  7px;
    text-transform: uppercase;
}

.su-qr-grid {
    display:               grid;
    gap:                   5px;
    grid-template-columns: 1fr 1fr;
    margin-bottom:         8px;
}

.su-qr-dl-btn {
    background:    var(--su-color-primary);
    border:        none;
    border-radius: var(--su-radius-sm);
    color:         var(--su-color-white);
    cursor:        pointer;
    font-size:     0.73rem;
    line-height:   1.3;
    padding:       5px 6px;
    transition:    background var(--su-transition);
}

.su-qr-dl-btn:hover:not(.su-locked) {
    background: var(--su-color-accent-orange);
}

.su-qr-dl-btn.su-locked {
    background: #c8ccd8;
    color:      var(--su-color-white);
    cursor:     not-allowed;
}

.su-panel-upgrade {
    color:      #888888;
    font-size:  0.72rem;
    margin:     4px 0 0;
    text-align: center;
}

.su-panel-upgrade a {
    color:       var(--su-color-accent-orange);
    font-weight: 600;
}

/* ── Social share grid ─────────────────────────────────────────────────── */
.su-share-grid {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

.su-share-btn {
    align-items:     center;
    border-radius:   var(--su-radius-sm);
    color:           var(--su-color-white);
    display:         flex;
    font-size:       0.8rem;
    font-weight:     600;
    gap:             8px;
    padding:         7px 12px;
    text-decoration: none;
}

.su-share-btn:hover {
    color:           var(--su-color-white);
    opacity:         0.86;
    text-decoration: none;
}

.su-twitter  { background: var(--su-color-twitter);  }
.su-facebook { background: var(--su-color-facebook); }
.su-linkedin { background: var(--su-color-linkedin); }
.su-whatsapp { background: var(--su-color-whatsapp); }
.su-telegram { background: var(--su-color-telegram); }

/* ── Password show/hide toggle ─────────────────────────────────────────── */
.input-form {
    position: relative;
}

.pwd-toggle-btn {
    background:  none;
    border:      none;
    color:       var(--su-color-muted-light);
    cursor:      pointer;
    line-height: 1;
    padding:     4px;
    position:    absolute;
    right:       12px;
    top:         50%;
    transform:   translateY(-50%);
    z-index:     5;
}

.pwd-toggle-btn:focus {
    outline: none;
}

.pwd-toggle-btn:hover {
    color: #555555;
}

/* ── Uniform form controls (site-wide) ─────────────────────────────────── */

/* Normalise .form-control across all usages */
.form-contact .form-control,
.su-form .form-control,
.form-control {
    background:    var(--su-color-white);
    border:        1px solid var(--su-color-border);
    border-radius: var(--su-radius) !important;
    color:         var(--su-color-text);
    font-size:     1.5rem;
    height:        auto;
    padding:       12px 16px;
    transition:    border-color var(--su-transition), box-shadow var(--su-transition);
}

.form-control:focus,
.form-contact .form-control:focus,
.su-form .form-control:focus {
    border-color: var(--su-color-accent);
    box-shadow:   0 0 0 3px rgba(250, 143, 119, 0.18);
    outline:      none;
}

.form-control::placeholder,
.form-contact .form-control::placeholder {
    color:       var(--su-color-text-muted);
    font-weight: 400;
}

.form-contact textarea {
    border-radius: var(--su-radius) !important;
    height:        auto !important;
    min-height:    120px;
}

/* Select styling — uniform arrow + appearance */
select.form-control {
    appearance:          none;
    -webkit-appearance:  none;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23646d77' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat:   no-repeat;
    background-size:     10px 7px;
    cursor:              pointer;
    padding-right:       38px;
}

/* FA icons inside buttons — prevent icon from inflating button/input-group height */
button i.fas,
button i.far,
button i.fab,
.btn i.fas,
.btn i.far,
.btn i.fab {
    line-height:    1;
    vertical-align: middle;
}

/* Blog sidebar search input */
.sidebar-widget .input-group .form-control {
    border-radius: var(--su-radius) 0 0 var(--su-radius) !important;
    padding:       10px 16px;
    height:        auto;
}

/* Blog sidebar search button */
.sidebar-widget .input-group .btn-primary {
    background:    var(--su-color-accent-orange);
    border:        none;
    border-radius: 0 var(--su-radius) var(--su-radius) 0;
    padding:       10px 18px;
    line-height:   1.5;
}

/* ── Preview page (services/preview.html) ──────────────────────────────── */
.su-preview-table {
    font-size: 0.93rem;
}

.su-preview-th {
    color:   var(--su-color-text-muted);
    width:   160px;
}

.su-preview-dest {
    word-break: break-all;
}

.su-preview-actions {
    align-items: center;
    display:     flex;
    flex-wrap:   wrap;
    gap:         12px;
    margin-top:  20px;
}

.su-btn-sm {
    font-size: 0.85rem;
}

.su-preview-code-block {
    background:     #1a1a2e;
    border-radius:  var(--su-radius);
    color:          #e2e8f0;
    font-size:      1.1rem;
    letter-spacing: 0.03rem;
    padding:        20px;
    text-align:     center;
}

/* ── Global text utilities ──────────────────────────────────────────────── */
.su-muted-sm {
    color:     var(--su-color-text-muted);
    font-size: 0.85rem;
}

.su-text-sm { font-size: 0.88rem; }

.su-required {
    color: var(--su-color-danger);
}

/* ── Form validation helpers ────────────────────────────────────────────── */
.su-form-error {
    color:       var(--su-color-danger);
    font-size:   0.82rem;
    margin-top:  3px;
    padding-left: 4px;
}

.alert.su-alert-compact {
    border-radius: var(--su-radius-sm);
    font-size:     0.9rem;
    padding:       8px 12px;
}

/* Support link style */
.support-link {
    color:       var(--su-color-primary-mid, #2a1880);
    font-size:   1.5rem;
    line-height: 1.6;
}

.support-link:hover {
    color:           var(--su-color-accent-orange);
    text-decoration: underline;
}

/* ── Button height normalization ────────────────────────────────────────────
 * style.css defines .border-btn with padding: 13px 48px + font-size: 16px
 * which creates a ~56px tall button. Override to match Bootstrap .btn (~38px).
 * ───────────────────────────────────────────────────────────────────────── */
.border-btn {
    font-size:      1.5rem;
    letter-spacing: 0.03em;
    padding:        10px 25px;
}

/* .borders-btn / .borders-btn3 are plan-card CTAs — keep them proportional */
.borders-btn,
.borders-btn3 {
    font-size:   1.5rem;
    line-height: 1.5;
    padding:     10px 25px;
}

/* .borders-btn2 — hero result actions; already compact, just ensure line-height */
.borders-btn2 {
    line-height: 1.5;
}

/* Bootstrap .btn — prevent FA icon from inflating height (already in global rule,
 * repeated here for any btn variant that loads this file but not base-back.css) */
.btn {
    line-height: 1.5;
}

/* Ensure all .btn-warning, .btn-outline-* used as CTAs stay at standard height */
.btn-warning,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-danger,
.btn-primary {
    padding:     10px 25px;
    font-size:   1.5rem;
    line-height: 1.5;
}

/* ── F20: Password entry page ──────────────────────────────────────────────── */
.su-pwd-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      60vh;
    padding:         2rem 1rem;
}

.su-pwd-card {
    background:    #fff;
    border-radius: 12px;
    box-shadow:    0 4px 24px rgba(0,0,0,.10);
    padding:       2.5rem 2rem;
    max-width:     420px;
    width:         100%;
    text-align:    center;
}

.su-pwd-icon {
    font-size:    2.5rem;
    color:        #140c40;
    margin-bottom: 1rem;
}

.su-pwd-title {
    font-size:     1.4rem;
    font-weight:   700;
    color:         #140c40;
    margin-bottom: .5rem;
}

.su-pwd-sub {
    color:         #6c757d;
    font-size:     .95rem;
    margin-bottom: 1.5rem;
}

.su-pwd-error {
    background:    #fff3f3;
    border:        1px solid #f5c6cb;
    border-radius: 6px;
    color:         #842029;
    padding:       .6rem 1rem;
    margin-bottom: 1rem;
    font-size:     .9rem;
}

.su-pwd-field {
    position:      relative;
    margin-bottom: 1rem;
}

.su-pwd-input {
    width:         100%;
    padding:       .65rem 2.8rem .65rem .9rem;
    border:        1.5px solid #ced4da;
    border-radius: 6px;
    font-size:     1rem;
    outline:       none;
    box-sizing:    border-box;
    transition:    border-color .15s;
}

.su-pwd-input:focus {
    border-color: #140c40;
}

.su-pwd-toggle {
    position:   absolute;
    right:      .7rem;
    top:        50%;
    transform:  translateY(-50%);
    background: none;
    border:     none;
    cursor:     pointer;
    color:      #6c757d;
    padding:    0;
    font-size:  1rem;
    line-height: 1;
}

.su-pwd-submit {
    padding:       .7rem 1.5rem;
    font-size:     1rem;
    font-weight:   600;
    border-radius: 6px;
}