/* ============================================================
   WC Free Digital Download – Frontend Styles
   Compatible with WooCommerce + WoodMart theme
   ============================================================ */

:root {
    --fdd-btn-bg      : #2e7d32;
    --fdd-btn-color   : #ffffff;
    --fdd-ring-color  : #2e7d32;
    --fdd-ring-bg     : #e8f5e9;
    --fdd-ready-green : #2e7d32;
    --fdd-radius      : 8px;
    --fdd-transition  : 0.3s ease;
}

/* ----------------------------------------------------------
   Wrapper
   ---------------------------------------------------------- */
.fdd-wrapper {
    margin-top: 24px;
    margin-bottom: 8px;
    clear: both;
}

/* ----------------------------------------------------------
   Step visibility — the only rule that controls show/hide.
   ALL steps are hidden by default (including when WoodMart
   or any theme stylesheet sets display:block/flex on them).
   JS adds .fdd-visible to the active step only.
   ---------------------------------------------------------- */
.fdd-wrapper .fdd-step {
    display: none !important;
}

.fdd-wrapper .fdd-step.fdd-visible {
    display: flex !important;
}

/* Init step is a column of block-level items, not flex */
.fdd-wrapper .fdd-step--init.fdd-visible {
    display: block !important;
}

/* ----------------------------------------------------------
   Base button (inherits WoodMart .button.alt then overrides)
   ---------------------------------------------------------- */
.fdd-btn {
    display          : inline-flex !important;
    align-items      : center;
    gap              : 8px;
    background-color : var(--fdd-btn-bg) !important;
    color            : var(--fdd-btn-color) !important;
    border           : none !important;
    border-radius    : var(--fdd-radius) !important;
    padding          : 14px 28px !important;
    font-size        : 16px !important;
    font-weight      : 600 !important;
    letter-spacing   : 0.3px;
    cursor           : pointer;
    transition       : filter var(--fdd-transition),
                       transform var(--fdd-transition) !important;
    text-decoration  : none;
}
.fdd-btn:hover:not([disabled]) {
    filter   : brightness(1.1);
    transform: translateY(-1px);
    color    : var(--fdd-btn-color) !important;
}
.fdd-btn:active:not([disabled]) {
    transform: translateY(0);
}
.fdd-btn[disabled] {
    opacity: 0.55;
    cursor : not-allowed;
}

.fdd-btn--outline {
    background-color : transparent !important;
    color            : var(--fdd-btn-bg) !important;
    border           : 2px solid var(--fdd-btn-bg) !important;
}
.fdd-btn--outline:hover {
    background-color : var(--fdd-btn-bg) !important;
    color            : var(--fdd-btn-color) !important;
}

/* ----------------------------------------------------------
   Step: Countdown (flex column, centred)
   ---------------------------------------------------------- */
.fdd-wrapper .fdd-step--countdown.fdd-visible {
    display        : flex !important;
    flex-direction : column;
    align-items    : center;
    gap            : 16px;
}

.fdd-countdown-ring {
    position : relative;
    width    : 120px;
    height   : 120px;
}

.fdd-ring-svg {
    width     : 100%;
    height    : 100%;
    transform : rotate(-90deg);
}

.fdd-ring-bg {
    fill         : none;
    stroke       : var(--fdd-ring-bg);
    stroke-width : 8;
}

.fdd-ring-progress {
    fill           : none;
    stroke         : var(--fdd-ring-color);
    stroke-width   : 8;
    stroke-linecap : round;
    transition     : stroke-dashoffset 1s linear;
}

.fdd-countdown-text {
    position        : absolute;
    inset           : 0;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    line-height     : 1;
}

.fdd-seconds {
    font-size            : 32px;
    font-weight          : 700;
    color                : var(--fdd-ring-color);
    font-variant-numeric : tabular-nums;
}

.fdd-sec-label {
    font-size      : 12px;
    color          : #888;
    margin-top     : 2px;
    text-transform : uppercase;
    letter-spacing : 0.5px;
}

.fdd-countdown-msg {
    font-size  : 14px;
    color      : #555;
    text-align : center;
    max-width  : 320px;
    margin     : 0;
}

/* Spinner while waiting for AJAX after countdown ends */
.fdd-loading .fdd-ring-progress {
    animation        : fdd-spin 1s linear infinite;
    stroke-dasharray : 80 246;
}
@keyframes fdd-spin {
    to { stroke-dashoffset: -327; }
}

/* ----------------------------------------------------------
   Step: Ready
   ---------------------------------------------------------- */
.fdd-wrapper .fdd-step--ready.fdd-visible {
    display        : flex !important;
    flex-direction : column;
    align-items    : flex-start;
    gap            : 8px;
}

.fdd-ready-msg {
    font-size   : 15px;
    font-weight : 600;
    color       : var(--fdd-ready-green);
    margin      : 0;
}

.fdd-expire-note {
    font-size : 12px;
    color     : #888;
    margin    : 0;
}

/* ----------------------------------------------------------
   Step: Error
   ---------------------------------------------------------- */
.fdd-wrapper .fdd-step--error.fdd-visible {
    display        : flex !important;
    flex-direction : column;
    gap            : 10px;
    align-items    : flex-start;
    background     : #fff8f8;
    border         : 1px solid #ffd7d7;
    border-radius  : var(--fdd-radius);
    padding        : 16px;
}

.fdd-error-msg {
    color     : #c62828;
    font-size : 14px;
    margin    : 0;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 480px) {
    .fdd-btn {
        width           : 100% !important;
        justify-content : center;
    }
    .fdd-wrapper .fdd-step--ready.fdd-visible {
        align-items: center;
    }
}

/* ----------------------------------------------------------
   WoodMart: hide native purchase area when FDD is active.
   Belt-and-suspenders fallback in case a child theme re-adds
   the form after our PHP hook removes it.
   ---------------------------------------------------------- */
.fdd-wrapper ~ form.cart,
.fdd-wrapper ~ .woodmart-buy-now-btn,
.fdd-wrapper ~ .single_add_to_cart_button {
    display: none !important;
}