@charset "UTF-8";

/* ==========================================================================
   [PK自訂樣式]
   PK-Info.css - Styles for Information Pages (Terms, Privacy, Cookie)
   依賴：pk-style.css (提供 CSS 變數)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page Header
   -------------------------------------------------------------------------- */
/* Moved to pk-style.css */

/* --------------------------------------------------------------------------
   2. Privacy Info Accordion (手風琴) - DEPRECATED
   Styles moved to pk-style.css for global usage.
   This section is kept empty to prevent 404s if referenced, 
   but logic is now handled by .panel-group in pk-style.css
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. Cookie Content (純文字內容，無手風琴)
   -------------------------------------------------------------------------- */
.cookie-content {
    background: var(--pk-bg-white);
    padding: 40px;
    border: 1px solid var(--pk-border-light);
    border-radius: var(--pk-radius-lg);
    box-shadow: var(--pk-shadow);
    margin-bottom: 40px;
}

.cookie-content p {
    margin: 0 0 20px;
    line-height: 1.8;
    color: var(--pk-text-main);
    font-size: 15px;
}

.cookie-content p:last-child {
    margin-bottom: 0;
}

.cookie-content .text-title,
.cookie-content h5 {
    margin: 30px 0 15px;
    font-size: 18px;
    font-weight: 600;
    color: var(--pk-primary);
}

.cookie-content .text-title:first-child,
.cookie-content h5:first-child {
    margin-top: 0;
}

.cookie-content ul,
.cookie-content ol {
    margin: 15px 0;
    padding-left: 25px;
}

.cookie-content li {
    margin-bottom: 12px;
    line-height: 1.8;
    color: var(--pk-text-main);
    font-size: 15px;
}

.cookie-content a {
    color: var(--pk-primary);
    text-decoration: underline;
}

.cookie-content a:hover {
    color: var(--pk-primary-hover);
}

/* --------------------------------------------------------------------------
   4. Loading State
   -------------------------------------------------------------------------- */
.info-loading {
    text-align: center;
    padding: 80px 20px;
    color: var(--pk-text-secondary);
    font-size: 16px;
}

.info-loading::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    border: 4px solid var(--pk-border-light);
    border-top-color: var(--pk-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    vertical-align: middle;
}

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

/* --------------------------------------------------------------------------
   5. Responsive Design
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .cookie-content {
        padding: 25px 20px;
    }
    
    .cookie-content p,
    .cookie-content li {
        font-size: 14px;
    }
    
    .cookie-content .text-title,
    .cookie-content h5 {
        font-size: 16px;
        margin: 25px 0 12px;
    }
}

@media (max-width: 480px) {
    .cookie-content {
        padding: 20px 15px;
    }
}

/* --------------------------------------------------------------------------
   6. Print Styles
   -------------------------------------------------------------------------- */
@media print {
    .cookie-content {
        box-shadow: none;
        border: 1px solid var(--pk-border);
    }
}

/* --------------------------------------------------------------------------
   7. Accessibility
   -------------------------------------------------------------------------- */
.cookie-content a:focus {
    outline: 2px solid var(--pk-primary);
    outline-offset: 2px;
}