@charset "UTF-8";
/**
 * Mogel - Fiyat Alarm Sistemi
 * alert-form.css | Trigger button + Modal design
 */

/* ------------------------------------------------------------------
   TRIGGER BUTTON - tam genislik, kart tasarimi
   ------------------------------------------------------------------ */
.pd-alert-trigger {
    display:        flex;
    align-items:    center;
    gap:            12px;
    width:          100%;
    padding:        12px 14px;
    margin-bottom:  14px;
    background:     #ffffff;
    border:         1.5px solid #fed7aa;
    border-radius:  10px;
    cursor:         pointer;
    text-align:     left;
    font-family:    inherit;
    font-size:      inherit;
    color:          inherit;
    box-sizing:     border-box;
    transition:     background 0.15s, border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance:     none;
}

.pd-alert-trigger:hover {
    background:   #fff7ed;
    border-color: #f97316;
    box-shadow:   0 2px 8px rgb(249 115 22 / .10);
}

.pd-alert-trigger:active {
    background: #ffedd5;
}

.pd-alert-trigger:focus-visible {
    outline:        2px solid #f97316;
    outline-offset: 2px;
}

.pd-alert-trigger__icon {
    width:          38px;
    height:         38px;
    min-width:      38px;
    border-radius:  9px;
    background:     #fff7ed;
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          #f97316;
    flex-shrink:    0;
    transition:     background 0.15s;
}

@keyframes bellRingRandom {
    0%             { transform: rotate(0deg); }
    /* 1. çalış */
    8%             { transform: rotate(-18deg); }
    13%            { transform: rotate(14deg); }
    17%            { transform: rotate(-9deg); }
    21%            { transform: rotate(5deg); }
    24%, 57%       { transform: rotate(0deg); }
    /* 2. çalış */
    62%            { transform: rotate(16deg); }
    67%            { transform: rotate(-12deg); }
    71%            { transform: rotate(7deg); }
    74%, 83%       { transform: rotate(0deg); }
    /* 3. çalış — kısa */
    86%            { transform: rotate(-13deg); }
    90%            { transform: rotate(10deg); }
    93%            { transform: rotate(-5deg); }
    95%, 100%      { transform: rotate(0deg); }
}
.pd-alert-trigger__icon svg {
    animation:        bellRingRandom 8s ease-in-out infinite;
    transform-origin: 50% 15%;
}
@media (prefers-reduced-motion: reduce) {
    .pd-alert-trigger__icon svg { animation: none; }
}

.pd-alert-trigger:hover .pd-alert-trigger__icon {
    background: #ffedd5;
}

.pd-alert-trigger__text {
    flex:         1;
    min-width:    0;
    display:      flex;
    flex-direction: column;
    gap:          2px;
    line-height:  1.25;
}

.pd-alert-trigger__text strong {
    font-size:   0.875rem;
    font-weight: 700;
    color:       #c2410c;
    display:     block;
}

.pd-alert-trigger__text small {
    font-size:  0.75rem;
    color:      #9a3412;
    display:    block;
    font-weight: 400;
}

.pd-alert-trigger__arrow {
    color:      #f97316;
    flex-shrink: 0;
    opacity:    0.6;
    transition: transform 0.15s, opacity 0.15s;
}

.pd-alert-trigger:hover .pd-alert-trigger__arrow {
    transform: translateX(3px);
    opacity:   1;
}

/* ------------------------------------------------------------------
   MODAL OVERLAY - vanilla JS ile display:flex / display:none
   ------------------------------------------------------------------ */
#priceAlertModal {
    position:       fixed;
    inset:          0;
    z-index:        9990;
    background:     rgba(0,0,0,.48);
    display:        flex;  /* JS tarafindan none/flex toggle edilir */
    align-items:    center;
    justify-content: center;
    padding:        1rem;
    box-sizing:     border-box;
    overflow-y:     auto;
}

#priceAlertModal .modal-dialog {
    width:     100%;
    max-width: 440px;
    margin:    auto;
}

/* ------------------------------------------------------------------
   MODAL CONTAINER
   ------------------------------------------------------------------ */
.pa-modal {
    border:        none;
    border-radius: 14px;
    overflow:      hidden;
    box-shadow:    0 20px 60px rgb(0 0 0 / .15);
}

/* ── Modal header ─────────────────────────────────────────────────── */
.pa-modal__head {
    display:      flex;
    align-items:  center;
    gap:          12px;
    padding:      18px 20px 14px;
    border-bottom: 1px solid #f3f4f6;
    background:   #fff;
}

.pa-modal__icon {
    width:          38px;
    height:         38px;
    min-width:      38px;
    border-radius:  9px;
    background:     #fff7ed;
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          #f97316;
}

.pa-modal__title {
    font-size:   1rem;
    font-weight: 700;
    color:       #111827;
    margin:      0;
    line-height: 1.25;
}

.pa-modal__sub {
    font-size:  0.75rem;
    color:      #9ca3af;
    margin:     2px 0 0;
    line-height: 1.3;
}

.pa-modal__close {
    margin-left: auto;
    width:       28px;
    height:      28px;
    min-width:   28px;
    border:      none;
    background:  transparent;
    color:       #9ca3af;
    border-radius: 6px;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  background 0.15s, color 0.15s;
    padding:     0;
}

.pa-modal__close:hover {
    background: #f3f4f6;
    color:      #374151;
}

/* ── Product bar ──────────────────────────────────────────────────── */
.pa-modal__product {
    display:      flex;
    align-items:  center;
    justify-content: space-between;
    gap:          8px;
    padding:      10px 20px;
    background:   #f9fafb;
    border-bottom: 1px solid #f3f4f6;
}

.pa-modal__product-name {
    font-size:     0.8125rem;
    color:         #374151;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     220px;
}

.pa-modal__price-now {
    font-size:  0.8125rem;
    color:      #6b7280;
    white-space: nowrap;
    flex-shrink: 0;
}

.pa-modal__price-now strong {
    color:       #111827;
    font-weight: 600;
}

/* ── Form body ────────────────────────────────────────────────────── */
.pa-modal__body {
    padding: 18px 20px 20px;
    background: #fff;
}

/* ── Field ────────────────────────────────────────────────────────── */
.pa-field {
    margin-bottom: 14px;
}

.pa-field:last-of-type {
    margin-bottom: 0;
}

/* ── Label ────────────────────────────────────────────────────────── */
.pa-label {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-size:     0.8125rem;
    font-weight:   600;
    color:         #374151;
    margin-bottom: 5px;
    cursor:        default;
}

.pa-req {
    color: #ef4444;
    font-weight: 600;
}

.pa-hint-inline {
    font-size:   0.7rem;
    font-weight: 400;
    color:       #9ca3af;
    margin-left: auto;
}

/* ── Input ────────────────────────────────────────────────────────── */
.pa-input {
    width:         100%;
    box-sizing:    border-box;
    padding:       9px 12px;
    font-size:     0.9rem;
    line-height:   1.5;
    color:         #111827;
    background:    #f9fafb;
    border:        1px solid #e5e7eb;
    border-radius: 7px;
    transition:    border-color 0.15s, box-shadow 0.15s;
    appearance:    none;
    -webkit-appearance: none;
}

.pa-input::placeholder {
    color:   #9ca3af;
    opacity: 1;
}

.pa-input:focus {
    outline:      none;
    border-color: #f97316;
    box-shadow:   0 0 0 3px rgb(249 115 22 / .12);
    background:   #fff;
}

.pa-input.is-error {
    border-color: #ef4444;
    box-shadow:   0 0 0 3px rgb(239 68 68 / .10);
}

.pa-input:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

/* ── Price input ──────────────────────────────────────────────────── */
.pa-price-wrap {
    position: relative;
}

.pa-price-prefix {
    position:       absolute;
    left:           12px;
    top:            50%;
    transform:      translateY(-50%);
    color:          #6b7280;
    font-size:      0.9rem;
    font-weight:    500;
    pointer-events: none;
    user-select:    none;
}

.pa-price-wrap .pa-input {
    padding-left: 26px;
}

/* ── Stepper (fiyat +/-) ──────────────────────────────────────────── */
.pa-stepper-wrap {
    display:   flex;
    align-items: stretch;
    gap:       6px;
}

.pa-stepper-wrap .pa-price-wrap {
    flex: 1;
}

.pa-step-btn {
    width:          40px;
    min-width:      40px;
    height:         auto;
    border:         1px solid #e5e7eb;
    border-radius:  7px;
    background:     #f3f4f6;
    color:          #374151;
    font-size:      1.25rem;
    font-weight:    400;
    line-height:    1;
    cursor:         pointer;
    transition:     background 0.15s, border-color 0.15s, color 0.15s;
    display:        flex;
    align-items:    center;
    justify-content: center;
    user-select:    none;
    padding:        0;
}

.pa-step-btn:hover:not(:disabled) {
    background:   #e5e7eb;
    border-color: #9ca3af;
    color:        #111827;
}

.pa-step-btn:active:not(:disabled) {
    background: #d1d5db;
    transform:  scale(0.94);
}

.pa-step-btn:focus-visible {
    outline:        2px solid #f97316;
    outline-offset: 2px;
}

.pa-step-btn:disabled {
    opacity: 0.35;
    cursor:  not-allowed;
}

/* ── Field error ──────────────────────────────────────────────────── */
.pa-field-error {
    font-size:   0.75rem;
    color:       #ef4444;
    margin:      4px 0 0;
    line-height: 1.4;
}

/* ── Consents ─────────────────────────────────────────────────────── */
.pa-consents {
    margin-top: 14px;
    display:    flex;
    flex-direction: column;
    gap:        8px;
}

.pa-check {
    display:   flex;
    align-items: flex-start;
    gap:       8px;
    cursor:    pointer;
    font-size: 0.78rem;
    color:     #6b7280;
    line-height: 1.45;
}

.pa-check input[type="checkbox"] {
    width:        14px;
    height:       14px;
    min-width:    14px;
    margin-top:   2px;
    accent-color: #f97316;
    cursor:       pointer;
}

.pa-check a {
    color:           #f97316;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pa-check a:hover {
    opacity: 0.8;
}

/* ── Message area ─────────────────────────────────────────────────── */
.pa-msg {
    margin-top: 12px;
}

.pa-msg[hidden] {
    display: none;
}

.pa-msg-error {
    display:       block;
    padding:       10px 14px;
    background:    #fef2f2;
    border:        1px solid #fecaca;
    border-radius: 7px;
    color:         #dc2626;
    font-size:     0.8125rem;
    line-height:   1.4;
    margin:        0;
}

/* ── Success state ────────────────────────────────────────────────── */
.pa-success {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       14px;
    background:    #f0fdf4;
    border:        1px solid #86efac;
    border-radius: 8px;
}

.pa-success__icon {
    color:      #16a34a;
    flex-shrink: 0;
    margin-top: 1px;
}

.pa-success__title {
    font-size:   0.9rem;
    font-weight: 600;
    color:       #15803d;
    margin:      0 0 3px;
}

.pa-success__sub {
    font-size: 0.8rem;
    color:     #6b7280;
    margin:    0;
}

.pa-success__link {
    color:           #f97316;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Submit button ────────────────────────────────────────────────── */
.pa-btn {
    width:          100%;
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            7px;
    padding:        10px 20px;
    margin-top:     16px;
    font-size:      0.9375rem;
    font-weight:    600;
    color:          #fff;
    background:     #f97316;
    border:         none;
    border-radius:  8px;
    cursor:         pointer;
    transition:     background 0.15s, transform 0.1s;
    letter-spacing: 0.01em;
}

.pa-btn:hover:not(:disabled) {
    background: #ea6c0a;
}

.pa-btn:active:not(:disabled) {
    background: #c2560c;
    transform:  translateY(1px);
}

.pa-btn:focus-visible {
    outline:        2px solid #f97316;
    outline-offset: 2px;
}

.pa-btn:disabled,
.pa-btn.is-loading {
    opacity: 0.65;
    cursor:  not-allowed;
    transform: none;
}

.pa-btn.is-loading::before {
    content:       '';
    display:       block;
    width:         15px;
    height:        15px;
    border:        2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation:     pa-spin 0.65s linear infinite;
    flex-shrink:   0;
}

@keyframes pa-spin {
    to { transform: rotate(360deg); }
}


/* ------------------------------------------------------------------
   LEGACY - eski .alert-widget siniflari (geriye donuk compat)
   ------------------------------------------------------------------ */
.alert-widget {
    display: none; /* artık modal ile değiştirildi */
}