/**
 * Reservation Management - Custom Styles
 * Based on coding-sample design
 */

/* ===================================
   Color Variables
   =================================== */
:root {
    --primary-blue: #036eb8;
    --danger-red: #e95447;
    --bg-gray: #f5f5f5;
    --bg-light-blue: #f1f8ff;
    --border-gray: #cccccc;
    --text-gray: #707070;
}

/* ===================================
   Section Titles
   =================================== */
.section-title {
    border-left: 4px solid var(--primary-blue);
    padding-left: 10px;
    font-weight: bold;
}

/* ===================================
   Page Title
   =================================== */
.page-title-border {
    border-bottom: 4px solid var(--primary-blue);
}

/* ===================================
   Required Mark
   =================================== */
.required-mark {
    color: var(--danger-red);
}

/* ===================================
   Icon Mask Styles
   =================================== */
.icon-mask {
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

/* ===================================
   Button Styles
   =================================== */
.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--primary-blue);
    color: white;
    background-color: var(--primary-blue);
    border-radius: 0.375rem;
    font-weight: bold;
    transition: all 0.2s;
}

.btn-primary:hover {
    opacity: 0.9;
}

.btn-outline-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    background-color: white;
    border-radius: 0.375rem;
    font-weight: bold;
    transition: all 0.2s;
}

.btn-outline-primary:hover {
    background-color: rgba(3, 110, 184, 0.05);
}

.btn-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-gray);
    color: var(--text-gray);
    background-color: white;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

.btn-cancel:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ===================================
   Card Styles
   =================================== */
.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border-radius: 0.375rem;
    padding: 0.75rem;
    gap: 10px;
    width: 200px;
}

.action-card-primary {
    border: 2px solid var(--primary-blue);
}

.action-card-secondary {
    border: 2px solid var(--border-gray);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* ===================================
   Form Styles
   =================================== */
.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
}

.form-input:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 0;
    border-color: transparent;
}

.form-select {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
}

.form-select:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 0;
    border-color: transparent;
}

.form-textarea {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    resize: none;
}

.form-textarea:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 0;
    border-color: transparent;
}

/* ===================================
   Notification Box
   =================================== */
.notification-box {
    background-color: var(--bg-gray);
    border-radius: 10px;
    padding: 1rem;
}

.notification-content {
    background-color: white;
    border-radius: 10px;
    padding: 1rem;
}

/* ===================================
   Info Display
   =================================== */
.info-grid {
    display: grid;
    grid-template-columns: 250px auto;
    align-items: center;
    border-bottom: 1px dashed #d1d5db;
    padding-bottom: 0.75rem;
}

.info-label {
    display: flex;
    align-items: center;
}

.info-label-border {
    border-left: 5px solid var(--primary-blue);
    padding-left: 20px;
    padding-right: 20px;
    font-weight: bold;
}

/* ===================================
   Price Display
   =================================== */
.price-display {
    background-color: var(--bg-gray);
    padding: 10px;
    margin-bottom: 5px;
}

.price-row {
    display: flex;
    justify-content: space-between;
}

.price-discount {
    color: #ef4444;
}

.price-total {
    font-size: 28px;
    color: #ef4444;
    font-weight: bold;
}

/* ===================================
   Responsive Utilities
   =================================== */
@media (max-width: 640px) {
    .info-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .action-card {
        width: 100%;
    }
}

/* ===================================
   Container
   =================================== */
.container-custom {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ===================================
   Header and Footer
   =================================== */
.jcation-header,
.jcation-footer {
    max-width: 700px;
}

/* サービス直下ページ専用の幅拡張 */
.reservation-service .jcation-header,
.reservation-service .jcation-footer {
    max-width: 1200px;
}